Question

最初我使用SVG创建了一个条形图：

 bars.append("rect")
   .attr("x", midX)
   .attr("y", 0)
   .attr("width", function(d) { return x(d.values[0].value); })
   .attr("height", y.bandwidth())
   .classed("highlight", function(d) { return d.key == '15-0000'; })

这与以下css配对：

rect {
   fill: #ddd;
   stroke: #000;
   stroke-width: .5px;
}

.bar rect.highlight {
   fill: #F0B27A;
   stroke: #000;
   stroke-width: .5px;
}

我添加了一个完全不同的条形图：

svg.selectAll("rect")
    .data(barchartArray)
    .enter().append("rect")
    .attr("x", -300)
    .attr("y", function(d,i) { return i*11+70})
    .attr("width", function(d,i) { return d/1000; })
    .attr("height", 10);

如何在不操纵第一个条形图的情况下在CSS中对此rect进行更改？例如，如何在不转动第一个图表的情况下将此图表变为红色。我知道必须使用class / id但我不完全确定如何在CSS中格式化它。

Answer 1

SVG的支持classNames类似于普通的HTML元素。只需将className添加到根svg元素

即可

svg.attr("class", "chart1")

然后更改您的css以将该类名称包含为父级。

.chart1 { rect { ... } }

svg {
   height: 50px;
   width: 50px;
}

svg.bigger {
   height: 100px;
   width: 100px;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100"/>
</svg>
<svg class="bigger" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100"/>
</svg>

如何在不操纵其他svgs的情况下使用CSS设置svg样式？

1 个答案: