CODEWITHSUNDEEP
javascriptcssd3.js
whytheq
whytheq

Reputation: 35557

Applying css to the ticks and line of an axis

I have this in the css (code line 108):

.domain {
    fill: 'none';
    stroke-width: 0.7;
    stroke: 'black';
}

.tick {
    fill: 'none';
    stroke-width: 0.7;
    stroke: 'black';
}

And this in the javascript (code line 358):

// Add y axis with ticks and tick markers
var axisPadding = 2;
var leftAxisGroup = svg
    .append('g')
    .attr({
        transform: 'translate(' + (margin.left - axisPadding) + ',' + (margin.top) + ')',
        id: "yAxisG"
    });
var axisY = d3.svg.axis()
    .orient('left')
    .scale(yScale);
leftAxisGroup.call(axisY);

Why is the style not being applied? How do I make sure it is applied?

The full script and context is here: https://plnkr.co/edit/aSgNLb?p=preview

Upvotes: 0

Views: 910

Answers (1)

AA2992
AA2992

Reputation: 1607

The above CSS could be changed to

selector {
    fill: none; /* no quotes */
    stroke: black;  /* no quotes */
}

Keyword values are identifiers and have to be used as they are without quotes. When placed inside quotes these turn into strings which have no meaning under the value definition for their properties. Thus its not parsed as valid by the UA/browser.

CSS specs:
Textual Values & strings:

Identifiers cannot be quoted; otherwise they would be interpreted as strings.

Footnotes: SVG's fill and stroke properties: https://www.w3.org/TR/SVG/painting.html#SpecifyingPaint

Upvotes: 1

Related Questions