невозможно применить стили css к изображению svg, встроенному в тег div. - PullRequest
Новая
       28

невозможно применить стили css к изображению svg, встроенному в тег div.

0 голосов
/ 20 февраля 2020

Привет, у меня angular 5 проект. Я рисую гистограмму, используя библиотеку d3 js. В моей гистограмме есть вертикальные полосы, к которым я хотел бы применить стили. Однако это не работает, поскольку столбцы отображаются с черным цветом по умолчанию, как показано ниже.

enter image description here

Ниже приведен код компонента html, где У меня есть тег div с именем «histogramHolder», к которому я добавлю svg из файла TS моего компонента. 

performance.component.html

    <div class="row">

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

Ниже приведен файл моего компонента s css. 

performance.component.scss

    .bar { 
        fill: steelblue; 
    }

Ниже приведен фрагмент кода, в котором я создаю изображение svg и добавляю к тегу div имя «histogramHolder» 

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")) в коде. однако это не происходит, оцените любую помощь

1 Ответ

1 голос
/ 20 февраля 2020

Любой контент, который добавляется в DOM библиотекой, а затем настраивается css динамически добавленного элемента, не будет применяться, если он находится в компонента css. Поэтому необходимо добавить настроенный css в глобальном стиле.

Попробуйте добавить стиль SVG в свой стиль globle styles.s css

...