来自具有数组的对象的 D3 条形图答案

【问题标题】：D3 bar chart from objects with arrays来自具有数组的对象的 D3 条形图
【发布时间】：2014-01-24 01:31:50
【问题描述】：

下午好。

我将这个 D3 条形图示例与我的数据一起使用（与 jsfiddle 示例）。

图表运行良好，但我有一些我不知道我解决的问题。

xAxis 有关键参数的索引编号，而不是关键参数值；
当我按下“排序”按钮后对数据进行排序时；
排序后条形上方的数字消失或出现在对应条形上方的左侧

var dataset = {key: [0, 30], value:[60, 30]};

http://jsfiddle.net/3HL4a/75/

这里是您可以查看代码并执行更改的链接。

谢谢

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案1】：

要引用键值，您必须使用它们而不是索引：

var xScale = d3.scale.ordinal()
    .domain(dataset.key)
    .rangeRoundBands([0, w], 0.05);
// ...
.attr("x", function(d, i) {
  return xScale(dataset.key[i]);
})

您可以通过合并键和值数组使两者都成为同一数据元素的一部分来使这更好。

至于另一个问题，这是因为您选择了 text 元素，其中包括轴标签。即使使用键功能，这在这里也不起作用，因为其中一个轴标签与您要在栏上显示的标签相同。为这些标签分配一个特殊的类并相应地选择可以解决这个问题。

完整的 jsfiddle 参见here。

【讨论】：

你能更好地解释我如何合并键和值数组吗？在此之后我调用数据的方式是一样的吗？再来一次谢谢。
数据看起来类似于[{key: 0, value: 30}]。然后你会将整个东西传递给.data()，并在计算坐标时，将d.key 或d.value 传递给比例。
我改变了我之前提到的数据，虽然我可以使用这个代码 var key = function(d) { return d.key; };我只能访问数据的 d.value 属性：我的数据是一个对象数组 [{}]
不确定你在这里问什么，但最好把它放在一个单独的问题中。