Question

我遵循以下D3子弹图示例，尝试稍微修改它，以便范围的不同颜色也包含在JSON中：http://www.d3noob.org/2013/07/introduction-to-bullet-charts-in-d3js.html。改变的原因是我需要颜色是动态的并且依赖于各种各样的东西。

这在论坛中存在另一个地方，但旧的和未解决的。我应该补充一点，我是d3的新手，并且一般都没有很多JavaScript经验。

这是我使用的JSON。 “rangecolor”将来会是一个不同颜色的数组，因为有几个范围，但为了简单起见，我只尝试用一种颜色开始。

  {
    "title":"Memory Used",
    "subtitle":"MBytes",
    "ranges":[256,512,1024],
    "rangecolor": "red",
    "measures":[768],
    "markers":[900]
  }

现在，了解如何使用它，我查看了标题的工作示例：

  var title = svg.append("g")
      .style("text-anchor", "end")
      .attr("transform", "translate(-6," + height / 2 + ")");

  title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });

问题是我无法完成以下工作：

d3.selectAll(".bullet .range.s0")
  .style("fill", function(d) { return d.rangecolor; });

以下工作：

d3.selectAll(".bullet .range.s0")
  .style("fill", function(d) { return "red"; });

我还可以将rangecolor值提取到标题：

  title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.rangecolor; }); //works - title is now "red"

我的方法可能会被误导，所以任何有关如何最好地将颜色范围包含在JSON中并使用它的帮助将非常感激。

Answer 1

问题在于，当您选择所有项目符号时，没有数据绑定到它们，因此d为undefined：

d3.selectAll(".bullet .range.s0")
  .style("fill", function(d) { return d.rangecolor; });

为什么呢？您没有像这样执行数据连接：

d3.selectAll('.something').data(somethingData)
  .style('fill', function (d) { // d is defined });

你应该想知道为什么它对标题起作用了。这是因为当你这样做时：

var title = svg.append("g");

title继承了svg选项中的数据。见Mike Bostock explanation。事实上，我自己并不知道这种行为，我更喜欢明确地执行数据连接。

我不知道您的代码的整体结构，但您可以将rangecolor属性应用于数据继承（如标题）或重构以使用显式数据连接。

Answer 2

我和一些经验丰富的开发人员谈过，他说我所遵循的教程不是很好。这有点乱，我想找到更清洁的东西。在这方面，疑难解答很困难，

这里介绍的确切问题是通过使用d3.selectAll（“。bullet .range.s0”）。data（data）来解决的。

将颜色作为JSON输入到d3项目符号图表

2 个答案: