Question

我的代码应该根据数据创建一组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>

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

当我第二次运行此代码时，我希望第二个元素具有白色背景颜色。但是，没有任何改变。我的代码有问题吗？

Answer 1

当你跑步时：

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"; })

更新元素不起作用

1 个答案: