0

我的代码应该根据数据创建一组 div，并在每次添加下一个元素时突出显示。但是，这不起作用。

activeSymbolIndex = activeSymbolIndex + 1 % symbols.length;

var container = d3.select("#symbols-container");

var numbers = container
    .selectAll(".quote-container")
    .data(symbols);

var containers = numbers
    .enter()
    .append("div")
    .classed("quote-container", true);
containers
    .append("div")
    .classed("quote-change-numbers", true)
    .style("color", function (d) { return d.PercentColor; })
    .style("background-color", function (d, i) { return i == activeSymbolIndex ? "white" : "transparent"; })
    .text(function (d) { return d.Percent; });
containers
    .append("div")
    .classed("quote-name-text", true)
    .text(function (d) { return d.LongDescription; });

numbers
    .exit()
    .remove();

当我第一次运行此代码时，它可以正常工作并产生：

<div class="quote-container">
    <div class="quote-change-numbers" style="color: rgb(65, 183, 143); background-color: white;">0.20% 0</div>
    <div class="quote-name-text">E-Mini S&amp;P 500, Jun 13</div>
</div>
<div class="quote-container">
    <div class="quote-change-numbers" style="color: rgb(94, 186, 171); background-color: transparent;">0.13% 1</div>
    <div class="quote-name-text">E-mini NASDAQ 100, Jun 13</div>
</div>

第一个元素具有预期的白色背面颜色。

当我第二次运行此代码时，我希望第二个元素具有白色背景色。然而，什么都没有改变。我的代码有问题吗？

4

1 回答 1

0

当你运行时：

var containers = numbers
    .enter()
    .append("div")
    .classed("quote-container", true);

您分配给containers的结果numbers.enter()，这只是创建的节点。

因此，当您稍后运行时：

containers
    .append("div")
    .classed("quote-change-numbers", true)
    .style("color", function (d) { return d.PercentColor; })
    .style("background-color", function (d, i) { return i == activeSymbolIndex ? "white" : "transparent"; })

这只会在那些相同的、进入的节点上被调用——而不是在任何更新节点上。这就是为什么颜色永远不会改变的原因。

你会想要这样做numbers

numbers
  .select("quote-change-numbers") // NOTE: this uses select –– not selectAll
  .style("background-color", function (d, i) { return i == activeSymbolIndex ? "white" : "transparent"; })
于 2013-05-17T18:05:47.750 回答