D3作成X軸

こんにちは私はhttp://codepen.io/mbostock/pen/Jaemgから、次のコードD3作成X軸

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, 420]); 

d3.select(".chart") 
    .selectAll("div") 
    .data(data) 
    .enter().append("div") 
    .style("width", function(d) { return x(d) + "px"; }) 
    .text(function(d) { return d; });

を使用していると私は、対数形式で、x軸を追加しようとしています。

私が達成しようとしているのは、下の画像ですが、私は死んでしまっています。どのようにこれを達成するための手掛かりやアイデア。ご協力いただきありがとうございます。

出典

2016-05-05 user3837019

あなたはどのように対数目盛を使用することを求めているか、どのようにあなたのプロットに軸を追加しますか？または両方？ – Mark

両方を求める。 – user3837019

あなたは意図的にsvgを使う代わりに 'div'を使って作っていますか？ – Mark

最初のコメントは、divを使用してバーを作成する代わりに、適切なsvgベースの図面に移動することです。新しいプロットを開始するとき、私は仕事を始める傾向がありますthis古典的な例。あなたは、しかし、あなたのx軸上log scaleを使用したいとしている。

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .bar { 
 
    fill: steelblue; 
 
    } 
 
    
 
    .bar:hover { 
 
    fill: brown; 
 
    } 
 
    
 
    .axis { 
 
    font: 10px sans-serif; 
 
    } 
 
    
 
    .axis path, 
 
    .axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
    } 
 
    
 
    .x.axis path { 
 
    display: none; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var data = [4, 8, 15, 16, 23, 42]; 
 
    
 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 40 
 
     }, 
 
     width = 500 - margin.left - margin.right, 
 
     height = 200 - margin.top - margin.bottom; 
 

 
    var x = d3.scale.log() 
 
     .domain([0.01, 100]) 
 
     .range([0, width]); 
 

 
    var y = d3.scale.ordinal() 
 
     .rangeRoundBands([0, height], .1) 
 
     .domain(d3.range(data.length)) 
 

 
    var xAxis = d3.svg.axis() 
 
     .scale(x) 
 
     .orient("top") 
 
     .ticks(0, "1g") 
 
     .tickFormat(function(d){ 
 
     if (d === 0.01) return "0" 
 
     else if (d === 1 || d === 10 || d === 100) return d; 
 
     else return ""; 
 
     }); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0,0)") 
 
     .call(xAxis); 
 

 
    svg.selectAll(".bar") 
 
     .data(data) 
 
     .enter().append("rect") 
 
     .attr("class", "bar") 
 
     .attr("x", 0) 
 
     .attr("width", function(d){ 
 
     return x(d); 
 
     }) 
 
     .attr("y", function(d, i) { 
 
     return y(i); 
 
     }) 
 
     .attr("height", function(d,i) { 
 
     return y.rangeBand(); 
 
     }); 
 
     
 
    </script>

出典

2016-05-05 17:08:37 Mark

答えをありがとう。ところで、0.001から始めるのではなく、なぜ0から始めることができません。 – user3837019

@ user3837019 JavaScriptのため、Math.log（0）== -Infinity、log 0は実数ではないためです。 – Mark

@ user3837019あなたが望めば、あなたはそれを "偽造"することができます。上の更新されたコードスニペットを参照してください... – Mark

答えて

関連する問題