从v3升级到v5时代码不起作用

Question

当我将d3.js从v3.5升级到5.9.2（实际上是最新的）时，我的图形可以正确显示，但图例项不会显示。在我的代码中，data存在，但是我只有<div class="legend"></div>而内部没有<div data-id="DATA">DATA</div>。我不知道下面的代码对于v5是否正确。谢谢您的帮助。

d3.select(".segLegend")
  .insert("div", ".chart")
  .attr("class", "legend")
  .selectAll("div")
  .data(names)
  .sort()
  .enter()
  .append("div")
  .attr("data-id", function(id) {
  return id;
})
  .each(function(id) {
  d3.select(this)
    .append("span")
    .style(
    "background-color",
    $scope.openGraphModal.chart.color(id)
  );
  d3.select(this)
    .append("span")
    .html(id);
  if (id !== findSupplier.commodity.supplier.name) {
    $(this).toggleClass('c3-legend-item-hidden');
  }
})

具有V3的DOM V5的DOM

Answer 1

乍看之下，这是一个奇怪的问题，很难识别，因为在D3代码中，我们不在您所处的位置使用sort方法：在该位置，{{1 }}一文不值。看看（使用v3）：

sort

const data = [1,3,5,4,2];
const divs = d3.select("body")
  .selectAll(null)
  .data(data)
  .sort()
  .enter()
  .append("div")
  .html(Number)

如您所见，没有排序。在附加真实的DOM元素（再次为v3）之后，应使用<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>方法：

sort

const data = [1, 3, 5, 4, 2];
const divs = d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .sort()
  .html(Number)

最后，<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>在此正确位置也适用于v5：

sort

const data = [1, 3, 5, 4, 2];
const divs = d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .sort()
  .html(Number)

您的问题

在使用D3 v4 / 5的代码中，将<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>放在回车选择的那个奇怪（无用）的位置时，它不仅不排序任何东西，而且最重要的是，它避免了附加的DOM元素：

sort

const data = [1, 3, 5, 4, 2];
const divs = d3.select("body")
  .selectAll(null)
  .data(data)
  .sort()
  .enter()
  .append("div")
  .html(Number)

该代码段保持空白。

解决方案是将<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>移到正确的位置，这不仅是因为您要面对的问题，还因为它目前在v3中也没有用。