CODEWITHSUNDEEP
javascriptd3.js
user1676638
user1676638

Reputation: 49

d3 javascript draw line over circle

I am new to d3 javascript library. I am trying to draw line over a circle using d3. I am able to create circle but somehow line does not appear on circle. See sample code attached. Any help is highly appreciated.

diag_circles.data(circle_data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                console.log("d.x", d.x);
                return d.x
            })
            .attr("cy", function (d) {
                return d.y
            })
            .attr("r", function (d) {
                return d.r
            })
            .append('line')
            .attr("x1", function(d){return d.x- d.r})
            .attr("y1", function(d){return d.y})
            .attr("x2", function (d) { return d.x+ d.r})
            .attr("y2", function(d){return d.y})
            .attr("stroke-width", 20)
            .attr("stroke", "black");

https://jsfiddle.net/c58859xy/

Upvotes: 1

Views: 1360

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

In a nutshell: you cannot append a line element to a circle element.

When creating your SVG, you have to know which elements allow appended children and what children they can have.

Solution: You'll have to append the lines to the SVG:

var lines = svg.selectAll('line')
    .data(circle_data)
    .enter()
    .append("line")
    .attr("x1", function(d){return d.x- d.r})
    .attr("y1", function(d){return d.y})
    .attr("x2", function (d) { return d.x+ d.r})
    .attr("y2", function(d){return d.y})
    .attr("stroke-width", 20)
    .attr("stroke", "black");

Here is the updated fiddle: https://jsfiddle.net/c58859xy/1/

Upvotes: 4

Related Questions