如何将外部样式应用于D3中的数据连接？

Question

我是D3.js的新手。我将按照本教程进行操作：https://observablehq.com/@d3/lets-make-a-bar-chart

从本质上讲，本教程是制作一个包含6个数据元素的非常简单的条形图。我有两个解决方案，一个有效，另一个无效。首先，这是我的代码：

​

​

​

​

我在这里写的代码工作得很好。然而，我想我会尝试一些不同的东西，并应用外部风格。当我从标记中取消对CSS的注释，从JS文件中取消对添加的类名的注释，并注释掉我在JS文件中所做的样式时，这些样式都不适用。有人能解释一下为什么当我这样做的时候样式不适用吗？

Answer 1

您需要使用父div选择器来执行join，否则您将选择父div并在没有原始class名称的情况下合并它。

所以在我们的代码中，只需替换

d3.selectAll('div') with

chartContainer.selectAll('div')

下面是一个例子

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

<style>
  .container {
    font-size: 2em;
    font-wieght: bold;
  }
</style>
<script>
  const data = [1, 2, 3, 4, 5];

  const chart = d3.create("div");
  chart.attr('class', 'container');
  chart.selectAll('div')
    .data(data)
    .join('div')
    .text(d=> d)

  document.querySelector("#c").append(chart.node())
</script>

​