d3.jsを使用してY軸に文字列値を表示

Question

私はD3.jsを初めて使用しています。 サンプルデータを使ってバーを作成しようとしました。

var data = [{"date":"Chennai","value":"53"}, 
      {"date":"Banglore","value":"165"}, 
      {"date":"Pune","value":"269"}, 
      {"date":"Ban","value":"344"}, 
      {"date":"Hyderabad","value":"376"}, 
      {"date":"HYd","value":"410"}, 
      {"date":"Gurugram","value":"421"}, 
      {"date":"Che","value":"376"}]; 

文字列（例を表示することができ：「バンガロール」をY軸上のX軸および値ではなく、私はX軸上のY軸および値に文字列を表示する必要が

var margin = {top: 20, right: 20, bottom: 70, left: 60}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var y = d3.scale.ordinal().rangeRoundBands([height,0]); 

var x = d3.scale.linear().range([0, width]); 

var data = [{"date":"Chennai","value":"53"}, 
      {"date":"Banglore","value":"165"}, 
      {"date":"Pune","value":"269"}, 
      {"date":"Ban","value":"344"}, 
      {"date":"Hyderabad","value":"376"}, 
      {"date":"HYd","value":"410"}, 
      {"date":"Gurugram","value":"421"}, 
      {"date":"Kadapa","value":"405"}, 
      {"date":"Che","value":"376"}] 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(12); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 

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 + ")"); 

    data.forEach(function(d) { 
     d.value = +d.value; 
    }); 

    y.domain(data.map(function(d) { return d.date; })); 
    x.domain([0, d3.max(data, function(d) { return d.value; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", "-.55em") 
     .attr("transform", "rotate(-90)"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end"); 

    svg.selectAll("bar") 
     .data(data) 
    .enter().append("rect") 
     .style("fill", "steelblue") 
     .attr("x", function(d) { return x(d.value); }) 
     .attr("width", function(d) { return width - x(d.value); }) 
     .attr("y", function(d) { return y(d.date); }) 
     .attr("height", y.rangeBand()) 
     .attr("title",function(d) { return y(d.value); }); 

     svg.selectAll("bar")   
     .data(data) 
     .enter() 
     .append("text") 
     .attr("class","label") 
     .attr("y", (function(d) { return y(d.date) + y.rangeBand()/2 ; } )) 
     .attr("x", function(d) { return x(d.value) + 1; }) 
     .attr("dx", ".75em") 
     .text(function(d) { return d.date; });  

。私は上記のコードのバーが水平方向と来たが、縦必要があるとしようとした

。

この上で私を助けてください。

ありがとうございました。

Answer 1

あなたはあなたの "高さ/ X/Y" の操作をより正確にする必要があります:)

D3は、x = 0およびy = 0の座標は左下に落ちる座標空間を使用しています。

私はあなたのコードの一部変更しました： svg.selectAll("bar") .data(data) .enter().append("rect") .style("fill", "steelblue") .attr("x",function(d) { return x(d.value); }) .attr("width", y.rangeBand()) .attr("y", function(d) { return height - y(d.date); }) .attr("height", function(d) { return y(d.date); }) .attr("title",function(d) { return y(d.value); }); を、私は バーが適切な場所にある結果を持っています。場合は、no 私は、あなたがあなた自身でタイトルを把握することができます信じている - あなたは何をすべきか知っている

PS：http://jsfiddle.net/om42ts61/