データと一致するようにd3軸ティックを取得するにはどうすればよいですか？

は、ここに私のコードです：データと一致するようにd3軸ティックを取得するにはどうすればよいですか？

<!doctype html> 
<html> 
<head> 
    <title>D3</title> 
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

</head> 
<body> 
    <script> 

    var dataArray=[{"letter":"a", "value":20}, 
       {"letter":"b", "value":40}, 
       {"letter":"c", "value":50}, 
       {"letter":"m", "value":60}]; 
console.log(dataArray) 

var width=500; 
var height=500; 

var widthScale=d3.scale.linear() 
      .domain([0, 60]) 
      .range([0, width]); 

var heightScale=d3.scale.ordinal() 
      .domain(dataArray.map(function(d){ return d.letter })) 
      .range([0,height-125]); 

var letterScale=d3.scale.linear() 
     .domain([0,26]) 
     .range(["A","B","c","d"]) 

var color=d3.scale.linear() 
      .domain([0,60]) 
      .range(["red", "blue"]); 

var x_axis=d3.svg.axis() 
     .orient("bottom") 
     .ticks(12) 
     .scale(widthScale); 

var y_axis=d3.svg.axis() 
     .orient("left") 
     .ticks(4) 
     .tickFormat(function (d) {return d}) 
     .scale(heightScale); 

var canvas=d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(25, 0)"); 

var bars=canvas.selectAll("rect") 
     .data(dataArray) 
     .enter() 
      .append("rect") 
       .attr("width", function(d) {return widthScale(d.value);}) 
       .attr("height", 50) 
       .attr("fill", function(d) {return color(d.value)}) 
       .attr("y", function(d, i) {return i*100}); 
// bars.append("text") 
//  .attr("x", function(d) {return widthScale(d)/2}) 
//  .attr("y", function(d) {return -heightScale(d)}) 
//  .style("stroke-width", 6) 
//  .style("text-anchor", "middle") 
//  .style("font-size", "34px") 
//  .style("fill", "black") 
//  .text(function(d) {return console.log(d);}); 

canvas.append("g") 
    .attr("transform", "translate(5, 375)") 
    .call(x_axis); 

canvas.append("g") 
    .attr("transform", "translate(5,0)") 
    .call(y_axis) 

    </script> 
</body> 
</html>

私が取得する方法を見つけ出すことができないy軸はデータと一致し、バーが並ぶようにダニ？または、コメントアウトされたコードでわかるように、私はテキストを表示するのに苦労しました。正しいテキスト（数字）は、開発ツールの要素に表示されますが、ページには表示されません。どんな助けでも大歓迎です。

出典

2016-04-01 joeblack24

これはD3の問題ではありませんが、統計情報とdatavizに関する問題です。「y軸のティックをデータに合わせて取得する方法はわかりませんが、どのようなデータですか？なにもない！

あなたのデータセットはちょうど4つの値の配列です。各値に1つの横棒を描きたい場合は、x軸に量的変数（値：20,40,50,60）が表示されます。しかし、あなたのy軸は、カテゴリで、ではなく、です。たとえば、オレンジ、リンゴ、バナナ、および石灰をこれらの4つのバーにつけることができます。

だから、あなたのy軸ではなくlinearで、heightScale = d3.scale.ordinal()なければならない、と私はオブジェクトの配列で、ここで行ったように、バーのカテゴリ値を設定する必要があります。その後

var dataArray = [ 
    { 
     "fruit": "orange", 
     "value": 20 
    }, 
    { 
     "fruit": "apple", 
     "value": 40 
    }, 
    { 
     "fruit": "banana", 
     "value": 50 
    }, 
    { 
     "fruit": "lime", 
     "value": 60 
    } 
]

heightScale.domain(dataArray.map(function(d){ return d.fruit }));

その後、あなたはi * 100を使用してy位置を設定する必要はありません：あなたはこのようにドメインを設定します。代わりに、より柔軟な方法でそれを設定することができます。

.attr("y", function(d){ return heightScale(d) });

をちょうどあなたの手紙のための「果物」（A、B、C、D）を変更し、あなたが欲しいものがあるでしょう。

出典

2016-04-01 23:45:10

上記の変更は、 – joeblack24

を除いて変更されました.Y軸がページ上で極端に長くなる点を除いて – joeblack24

データと一致するようにd3軸ティックを取得するにはどうすればよいですか？

答えて

関連する問題