Angular 2.0 & D3.js nicht anwenden Css auf SVG

Question

Ich benutze Angular 2.0 TypeScript und d3.js Bibliothek zum Erstellen von Grafik. Ich versuche, CSS auf Asix anzuwenden (am wichtigsten shape-rendering: crispEdges;). Hast du irgendeine Idee?

Hier ist der Code

var vis = d3.select("#visualisation"), 
     WIDTH = 1000, 
     HEIGHT = 500, 
     MARGINS = { 
      top: 20, 
      right: 20, 
      bottom: 20, 
      left: 50 
     }, 
     xRange = d3.scale.linear() 
        .range([MARGINS.left, WIDTH - MARGINS.right]) 
        .domain([d3.min(this.calculationResults, function(d) { return d.time;}), 
          d3.max(this.calculationResults, function(d) { return d.time;})]), 
     yRange = d3.scale.linear() 
        .range([HEIGHT - MARGINS.top, MARGINS.bottom]) 
        .domain([d3.min(this.calculationResults, function(d) { return d.force; }), 
          d3.max(this.calculationResults, function(d) { return d.force;})]), 
     xAxis = d3.svg.axis() 
      .scale(xRange) 
      .ticks(10) 
      .tickSize(5) 
      .tickSubdivide(true), 
     yAxis = d3.svg.axis() 
      .scale(yRange) 
      .ticks(10) 
      .tickSize(5) 
      .orient("left") 
      .tickSubdivide(true); 

    vis.append("svg:g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
     .call(xAxis); 

    vis.append("svg:g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
     .call(yAxis); 

und CSS-Code

.axis path, .axis line 
{ 
     fill: none; 
     stroke: #777; 
     shape-rendering: crispEdges; 
} 
.tick 
{ 
     stroke-dasharray: 1, 2; 
} 

bitte teilen Sie Ihre Antwort :)

Answer 1

Ich bin nicht sicher, aber Sie sollte helfen,

Verkapselungsmodus

und/oder

piercing CSS combinators>>>, /deep/ und ::shadow

Blick hier - Styles in component for D3.js do not show in angular 2

Beste Glück!