角2.0とD3.jsはsvgにCSSを適用しません

Question

私は、グラフィックを作成するためにAngular 2.0 TypeScriptとd3.js libaryを使用しています。私はasix（ほとんどのimportand shape-rendering: crispEdges;）にCSSを適用しようとしています。あなたは何か考えていますか？ここ

はコード

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); 

とCSSコード

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

は、私はよく分からないが、これはあなたを助ける必要があります:)

Answer 1

をあなたの答えを共有してください

ですカプセル化モード

および/または

ピアスCSSコンビネータ>>>, /deep/とここ::shadow

表情 - Styles in component for D3.js do not show in angular 2

ベスト運！