Angular 2.0 & D3.js don't apply Css on svg

Question

I'm using Angular 2.0 TypeScript and d3.js libary for creating grafic. I'm trying to apply css on asix ( most importand shape-rendering: crispEdges; ). Do you have any idea?

here is the 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);

and css code

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

please share your answer :)

wheres your path and line ? You have .axis path .axis line but i dont see where you create these ... — thatOneGuy, Apr 07 '16 at 11:43
show us the whole code, or create a fiddle so we can see the problem — thatOneGuy, Apr 07 '16 at 11:51
Where does this code come from? A component I guess... What is its encapsulation mode? — Thierry Templier, Apr 07 '16 at 11:53
If you don't think it's a duplicate add a comment to get the question reopened. — Günter Zöchbauer, Apr 07 '16 at 13:05

score 7 · Accepted Answer · edited May 23 '17 at 12:17

7

I'm not sure but this should help you,

encapsulation mode

and/or

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

look here - Styles in component for D3.js do not show in angular 2

Best luck !

edited May 23 '17 at 12:17

Community

1
1

answered Apr 07 '16 at 13:02

micronyks

54,797
15
112
146

Angular 2.0 & D3.js don't apply Css on svg

1 Answers1