javascript - 使用数字时，d3 v5.8是否释放样式中断？

我的应用程序中有d3 v5代码，可使用数字转换div的高度。从今天的v5.8版本开始，这不再起作用：

d3.select("div").transition().style("height", 100)

如果我将其更改为...

d3.select("div").transition().style("height", "100px")

它再次工作。转换前的原始值是... style（“ height”，0），它以html内联样式的高度显示为“ 0px”。

今天的版本中发生了这种变化吗？是否打算进行此更改？在d3中使用像这样的数字是否被认为是不好的做法？谢谢。

编辑
我在下面添加了一个示例。 div1的高度不会过渡，因为它使用的是数字而不是带有px单位的字符串。

d3.select("#div1").transition().style("height", 100)

d3.select("#div2").transition().style("height", "100px")

<div id="div1" style="background-color:purple;height=10px;width=100px"></div>
<div id="div2" style="background-color:red;height=10px;width=100px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>

EDIT2：我在下面的v5.7中添加了一个正在运行的示例，您可以在其中看到两个转换都有效。我已经简化了我的原始示例。我必须在此示例中添加css以复制我在实际应用程序中看到的内容
。现在看来，它与inline-flex风格有关，我不确定为什么。

d3.select("#div1").transition().style("height", 100)

d3.select("#div2").transition().style("height", "100px")

#parent-div {
  width:100px;
  display:inline-flex;
}
.sub-div {
  width: 100%;
}

<div id="parent-div" style="position:absolute;top:10px;width:100px">
  <div id="div1" class="sub-div" style="background-color:purple;height=0px"></div>
  <div id="div2" class="sub-div" style="background-color:red;height=10px">    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

最佳答案

是的，新的D3 v5.8确实具有新的插值器。如果您查看今天（撰写本文时，2019年1月29日）发布的D3 v5.8的releases notes，


  在某些非字符串情况下，修复了transition.style和transition.attr中的插值。


在这里，可以使用v5.8轻松地说明该问题，我们尝试在其中尝试将"20px"插入到100（即，字符串到数字）：

const svg = d3.select("svg");
const rect = svg.append("rect")
  .attr("width", "20px")
  .attr("height", "20px")
rect.transition()
  .duration(10)
  .attr("width", 100)
  .on("end", function() {
    console.log(rect.attr("width"))
  })

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

如您所见，您将得到一个NaN！

注意，它不会在v5.7中发生：

const svg = d3.select("svg");
const rect = svg.append("rect")
  .attr("width", "20px")
  .attr("height", "20px")
rect.transition()
  .duration(10)
  .attr("width", 100)
  .on("end", function() {
    console.log(rect.attr("width"))
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

无论如何，回答您的问题：


  在d3中使用像这样的数字是否被认为是不好的做法？


是的，它是（我不得不承认我有时这样做），但这与D3不相关：如果您将"20px"（字符串）作为初始状态，则应该将"100px"（字符串）作为最终状态。 ，而不是100（一个数字）。这使插值更清晰，更不易出错。

但是，这不是您的情况：您的数字处于初始状态和最终状态。在您的情况下，即使您使用数字（例如0）作为初始状态，getter也会以字符串形式获取"0px"。最后，值得一提的是，您的特定示例在v5.7和v5.8上均不起作用，因此我建议您在问题中使用v5.7发布一个非常简单的工作示例。

编辑

根据要求，您使用工作示例编辑了问题，对此表示感谢。

关于您的示例＃1，它也不能与D3 v5.7一起使用，这就是我的观点（“您的特定示例在v5.7和v5.8上均不起作用”）。看看，没有紫色的div（两个高度均以0px开头）：

d3.select("#div1").transition().style("height", 100)
d3.select("#div2").transition().style("height", "100px")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="div1" style="background-color:purple;height:0px;width:100px"></div>
<div id="div2" style="background-color:red;height:0px;width:100px"></div>

我说过它也不能在D3 v5.7上使用，因为给我的印象是，在编写style("height", 0)之后，您以前已经使用D3设置了样式。

但是，在第一个示例中，我们发现了一个问题：您以内联样式使用了=而不是:（这似乎可以解释奇怪的行为，请继续阅读）。

关于第二个示例，即使对D3 v5.7使用了正确的内联样式语法，也无法正常工作：

d3.select("#div1").transition().style("height", 100)
d3.select("#div2").transition().style("height", "100px")

#parent-div {
  width:100px;
  display:inline-flex;
}
.sub-div {
  width: 100%;
}

<div id="parent-div" style="position:absolute;top:10px;width:100px">
  <div id="div1" class="sub-div" style="background-color:purple;height:0px"></div>
  <div id="div2" class="sub-div" style="background-color:red;height:10px"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

因此，这里发生的是inline-flex与不幸的内联样式的错误组合（即，未正确将高度设置为0px），这使紫色div扩展为父级。我们可以在下面的演示中看到这一点，在这里我仅转换了红色div：

d3.select("#div2").transition().style("height", "100px")

#parent-div {
  width:100px;
  display:inline-flex;
}
.sub-div {
  width: 100%;
}

<div id="parent-div" style="position:absolute;top:10px;width:100px">
  <div id="div1" class="sub-div" style="background-color:purple;height=0px"></div>
  <div id="div2" class="sub-div" style="background-color:red;height=10px">    </div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

关于javascript - 使用数字时，d3 v5.8是否释放样式中断？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54412479/