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

【问题标题】：How to apply external styles to data join in D3?如何将外部样式应用于 D3 中的数据连接？
【发布时间】：2020-05-18 19:34:14
【问题描述】：

我是 D3.js 的新手。我正在关注本教程：https://observablehq.com/@d3/lets-make-a-bar-chart

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

我在这里编写的代码完美运行。但是，我想我会尝试一些不同的东西并应用外部样式。当我从标签中取消注释 CSS，从 JS 文件中取消注释添加的类名，并注释掉我在 JS 文件中所做的样式时，没有任何样式适用。当我这样做时，任何人都可以解释为什么样式不适用吗？

【问题讨论】：

通常添加代码，而不是代码截图，将获得更好的答案和接收。对于您的问题，请尝试将 class 属性添加到您使用 selectAll() 添加的 div 中，您目前没有对 chartContainer div 执行任何操作，因此没有什么可以应用样式。

标签： javascript html css d3.js

【解决方案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>

【讨论】：