javascript - d3 不应用 class 或 id

Question

https://jsfiddle.net/asparism/yhr2t65t/1/

在上面的 jsfiddle 中，我无法为内联“rect”元素提供类或 ID，尽管 js svg 应用了适当的 css 着色，但它不会应用 .attr 的宽度。

同样，在另一个元素中，我有一个大数组，后面是:

var canvas = d3.select("body")
  .append("svg")
  .attr("width", 10000)
  .attr("height", 1000);



var bars = canvas.selectAll("rect")
 .data(ajaxArray)
 .enter()
 .append("rect")
 .attr("width", 3)
 .attr("height", function(d) {
   return d/30;
 })
 .attr("x", function(d, i) {
   return i*3});

所有这些都按预期显示，只是它不会附加到 css 类。我一直在学习教程，但我什至不确定要用谷歌搜索什么才能在这里找到答案。我一定在语法上遗漏了一些关于 .classed 选择器可以应用到哪里或哪些元素的东西？无论我在哪里添加 .class 语句，它都不起作用。

为什么我不能将我的 d3 svg 元素链接到 css 类？

Answer 1

好吧，D3 确实正确地应用了类和 ID。你这里的问题是别的(实际上，很多事情):

1. 您没有选择所需的矩形；
2. 默认 SVG 宽度为 300 像素。你的 rect 超出了这个范围；
3. SVG 矩形没有边框:它是stroke；
4. 更改类没有任何效果，因为在 CSS 中 ID 比类更具体，并且会覆盖它。因此，您必须删除 ID(或在类中添加 !important)；

这是一个演示。 rect 没有 datum 类，它的宽度只有 50px。 1 秒后，添加类，删除 ID 并更改宽度:

setInterval(function(){
  d3.select("rect").classed("datum", true).attr("id", null).attr("width", 200);
}, 1000)

.datum {
  stroke: blue;
  stroke-width: 5px;
}

#what {
  stroke: red;
  stroke-width: 5px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div><svg><rect x="20" y="20" height="100" width="50" id="what"></rect></svg></div>