Hacker News new | ask | show | jobs
by kjeetgill 2930 days ago
Thank this example: https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa...

...

  svg.insert("g", "g")
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
    .selectAll("path")
...

You might assume that g, fill, or stroke might be d3 terminology but it's really SVG! A quick Google of "svg g" will get you to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

It blew my mind open, hope to share the same.

1 comments

To my untrained eye that looks like css had a baby with js and the baby is an svg.
SVG is tied closely to CSS, so you can go in your CSS and create a style for your D3 graphs and do things like:

    .chartline { stroke-width: 3px; color: red; }
D3 has some convenience functions in JS for creating SVG, but you don't have to use them, you could write SVG just like HTML, it will look more like this in the DOM:

    <g fill="none" stroke="steelblue" stroke-linejoin="round">
      ...
    </g>