javascriptd3.js

d3 add line to existing plot


I'm creating scatterplots with D3 and want to superimpose some lines (a boxplot, eventually). I'm totally failing to append any line to the plots and don't get why. The code below is just one attempt of many.

I've searched and found various solutions, but haven't managed to get any of them to work. I'd be grateful of any help.

svg[i].selectAll(".dot")
.data(thedata)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 4.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "steelblue");

// Try to add arbitrary line            
svg[i].append("line")
.attr("x1", 0)
.attr("x2", 3)
.attr("y1", 0)
.attr("y2", 4);

Solution

  • I think you are missing style attribute for the line, add style attribute for the line. Example as below.

    svg[i]
    .append("line")
    .attr("x1",30)
    .attr("y1",20)
    .attr("x2",11)
    .attr("y2",1)
    .style("stroke", "black")