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

Question

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

这是我当前代码的 link： 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]);

最后，您应该使用国家/地区索引来设置条形图的 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; } )

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

D3 labels for horizontal bar chart are stacking over eachother and not in their correct positions

javascript

d3.js