无法将 css 样式应用于嵌入在 div 标签中的 svg 图像。？

Question

嗨，我有一个 angular 5 项目。我正在使用 d3js 库绘制条形图。在我的条形图中，有一些我想应用样式的垂直条。但是它不起作用，因为条形图以默认黑色显示，如下所示。

以下是我的组件 html 代码，其中我有一个名为 "histogramHolder" 的 div 标签，我将从我的组件 ts 文件中附加 svg。

performance.component.html

    <div class="row">

      <div class="col-1"></div>
      <div class="col-10"  id="histogramHolder">
      </div>
      <div class="col-2">  </div>
     </div>

以下是我的组件scss文件。

performance.component.scss

    .bar { 
        fill: steelblue; 
    }

以下是我创建 svg 图像并附加到名为 "histogramHolder"

的 div 标签的代码片段

import * as d3 from "d3";
@Component({
  selector: 'pc-performance',
  templateUrl: './performance.component.html',
  styleUrls: ['./performance.component.scss']
})
export class PerformanceComponent implements OnInit {

  ngOnInit() {

  const data=[{"key":"2019-09-11","documentCount":149002},{"key":"2019-09-12","documentCount":0},{"key":"2019-09-13","documentCount":80000},{"key":"2019-09-14","documentCount":0},{"key":"2019-09-15","documentCount":0},{"key":"2019-09-16","documentCount":0},{"key":"2019-09-17","documentCount":0},{"key":"2019-09-18","documentCount":270204},{"key":"2019-09-19","documentCount":0},{"key":"2019-09-20","documentCount":1},{"key":"2019-09-21","documentCount":0},{"key":"2019-09-22","documentCount":0},{"key":"2019-09-23","documentCount":269836},{"key":"2019-09-24","documentCount":0},{"key":"2019-09-25","documentCount":0},{"key":"2020-01-15","documentCount":0},{"key":"2020-01-16","documentCount":0},{"key":"2020-01-17","documentCount":0},{"key":"2020-01-18","documentCount":0},{"key":"2020-01-19","documentCount":0},{"key":"2020-01-20","documentCount":0},{"key":"2020-01-21","documentCount":0},{"key":"2020-01-22","documentCount":0},{"key":"2020-01-23","documentCount":0},{"key":"2020-01-24","documentCount":0},{"key":"2020-01-25","documentCount":0},{"key":"2020-01-26","documentCount":0},{"key":"2020-01-27","documentCount":0},{"key":"2020-01-28","documentCount":0},{"key":"2020-02-09","documentCount":0},{"key":"2020-02-10","documentCount":56000},{"key":"2020-02-11","documentCount":500}];

    const margin = {top: 20, right: 20, bottom: 60, left: 60},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

const x = d3.scaleBand().range([0, width]).paddingInner(0.1).paddingOuter(0.5);

    const y = d3.scaleLinear().range([height, 0]);

          const svg = d3.select("div#histogramHolder").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d) { return d.key; }));
    y.domain([0, d3.max(data, function(d) { return d.documentCount; })]);

    // append the rectangles for the bar chart
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.key); })
    .attr("width", x.bandwidth())
    .attr("y", function(d) { return y(d.documentCount); })
    .attr("height", function(d) { return height - y(d.documentCount); });

    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")  
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".35em")
        .attr("transform", "rotate(60)")
        .style("text-anchor", "start");

     // add the y Axis
     svg.append("g").call(d3.axisLeft(y));
  }
}

我希望条形图显示为钢蓝色，因为我在代码中设置它 (.attr("class", "bar") )。然而它并没有发生感谢任何帮助

Answer 1

库在 DOM 中添加的任何内容，如果在 [=14= 中，则不会应用动态添加元素的自定义 css ]组件的css。所以有必要在全局样式中添加自定义css。

尝试将 svg 样式放入您的 globle 样式中 styles.scss

无法将 css 样式应用于嵌入在 div 标签中的 svg 图像。？

unable to apply css styles to an svg image embedded in a div tag.?

css

svg

d3.js

angular5