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。你的问题是其他的（实际上，很多事情）：

您没有选择想要的矩形;
默认SVG宽度为300px。你的矩形超越了那个;
SVG rects没有border：而是stroke代替;
更改类没有任何效果，因为在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>

d3不应用class或id

1 个答案: