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 类?
最佳答案
好吧,D3 确实正确地应用了类和 ID。你这里的问题是别的(实际上,很多事情):
- 您没有选择所需的矩形;
- 默认 SVG 宽度为 300 像素。你的 rect 超出了这个范围;
- SVG 矩形没有
边框
:它是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>
关于javascript - d3 不应用 class 或 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43816028/