d3.js - CSS override isn't working (d3 object) -
i'm trying apply learned in css foundation course (codeschool) style d3 objects , far i'm not getting right.
i have bunch of css classes style charts. have 2 types of charts, second type need override 1 color.
main css (i didn't create myself)
.horizon { border-bottom: solid 1px #000; overflow: hidden; position: relative; } .horizon { border-top: solid 1px #000; border-bottom: solid 1px #000; } .horizon + .horizon { border-top: none; } .horizon canvas { display: block; } .horizon .title, .horizon .value { bottom: 0; line-height: 30px; margin: 0 6px; position: absolute; text-shadow: 0 1px 0 rgba(255,255,255,.5); white-space: nowrap; } .horizon .title { left: 0; } .horizon .value { right: 0; }
override css (for second type needed different color) (this used first file changing horizons horizon_small bad know.)
.horizon .horizon_small { border-top: solid 1px #bdbdbd; border-bottom: solid 1px #bdbdbd; }
applying here:
d3.select("#mychart") .selectall(".horizon") .data(data).enter().insert("div", ".bottom") .attr("class", ["horizon", "horizon_small"]) // used "horizon_small"
but doesn't work, not sure problem is.
the selector ".horizon .horizon_small" targets element class "horizon_small" inside (at level) other element class "horizon". if want target elements both classes, selector should ".horizon.horizon_small".
Comments
Post a Comment