水平条形图的D3标签相互堆叠，而不是正确的位置

Question

我正在使用此示例：http://hdnrnzk.me/2012/07/04/creating-a-bar-graph-using-d3js/

这是我当前代码的链接： http://jsfiddle.net/dj8gp2hm/

  var countries = ['Hong Kong', 'Singapore', 'New Zealand', 'Switzerland',
  'Mauritus', 'United Arab Emirates', 'Canada', 'Australia', 'Jordan',
  'Chile'],
  scores = [8.98, 8.54, 8.25, 8.19, 8.05, 8.09, 8.00, 7.87, 7.86, 7.84],
  chart,
  width = 800,
  bar_height = 40,
  height = bar_height * countries.length;

  chart = d3.select($("#step-1")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height);

  var x, y;

  chart = d3.select($("#step-2")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height);

  x = d3.scale.linear()
  .domain([0, d3.max(scores)])
  .range([0, width]);

  y = d3.scale.ordinal()
  .domain(scores)
  .rangeBands([0, height]);

  chart.selectAll("rect")
  .data(scores)
  .enter().append("rect")
  .attr("x", 0)
  .attr("y", y)
  .attr("width", x)
  .attr("height", bar_height);

  chart = d3.select($("#step-3")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height);

  chart.selectAll("rect")
  .data(scores)
  .enter().append("rect")
  .attr("x", 0)
  .attr("y", y)
  .attr("width", x)
  .attr("height", y.rangeBand());

  chart.selectAll("text")
  .data(scores)
  .enter().append("text")
  .attr("x", x)
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dx", -5)
  .attr("dy", ".36em")
  .attr("text-anchor", "end")
  .text(String);

  var left_width = 200;

  chart = d3.select($("#step-4")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', left_width + width)
  .attr('height', height);

  chart.selectAll("rect")
  .data(scores)
  .enter().append("rect")
  .attr("x", left_width)
  .attr("y", y)
  .attr("width", x)
  .attr("height", y.rangeBand());

  chart.selectAll("text.score")
  .data(scores)
  .enter().append("text")
  .attr("x", function(d) { return x(d) + left_width; })
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dx", -5)
  .attr("dy", ".36em")
  .attr("text-anchor", "end")
  .attr('class', 'score')
  .text(String);

  chart.selectAll("text.name")
  .data(countries)
  .enter().append("text")
  .attr("x", left_width / 2)
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dy", ".36em")
  .attr("text-anchor", "middle")
  .attr('class', 'name')
  .text(String);

我遇到了这个问题：

任何帮助解释为什么我的国家标签在左边没有正确排列将非常感谢。谢谢。 ：）

Answer 1

这里有几个问题。

首先，您根本不需要使用JQuery，d3可以完成您需要的一切。

chart = d3.select($("#step-4")[0])

与以下内容相同：

chart = d3.select("#step-4")

至于你的标签，你的序数规模只有一个错字。这些国家是y方向，而不是分数。 （我想你可能已经这样做了，让你的酒吧正确排队......）

y = d3.scale.ordinal()
  .domain(countries)    // you had scores here
  .rangeBands([0, height]);

最后，您应该使用countries索引来设置条形的y位置：

chart.selectAll("rect")
  .data(scores)
  .enter().append("rect")
  .attr("x", left_width)
  .attr("y", function(d,i) { return y(countries[i]); })
  .attr("width", x)
  .attr("height", y.rangeBand());

chart.selectAll("text.score")
  .data(scores)
  .enter().append("text")
  .attr("x", function(d) { return x(d) + left_width; })
  .attr("y", function(d, i){ return y(countries[i]) + y.rangeBand()/2; } )