2 circles and 1 line in one data entry in d3.js

Question

My dataset looks like cn,lm,ln 1,4.5,3.2 2,3.6,5.7 I want to make two circles with on(1,4.5) and on(1,3.2) and draw a line between them i have tried to make afunction but i think there is problem which i am not able to figure out please help.

function onload(){
var tooltip = d3.select('.toolt1');
    var width =1302,
        height = 605;
    var win;
    var cberror;
    d3.csv("test.csv",function(error,data){
        cberror=error;
        win=data;
    });

     var svg = d3.select("#area1").append("svg")
        .attr("width", width)
        .attr("height", height);

        for (var i=1; i<win.length; i=i+1) {

        var v1 = win[i][0];
        var v2 = win[i][1];
        var v3 = win[i][2];

        drawPoint(v1,v2,1.5)
        drawPoint(v1,v3,1.5)
    };
    function drawPoint(v1,v2,r) {

    var circle = svg.append("circle")
                    .attr("cx",v1*5 + 50)         
                    .attr("cy", h - v2)       
                    .attr("r", r);
    }

}

What happens when you try to run this code? What's the error? This answer, about how `d3.csv` is an asynchronous method, might help: http://stackoverflow.com/a/9492055/3442309 — Henry S, Jun 17 '16 at 06:51
And what is the value for variable `h` which is used in drawPoint function? — Gilsha, Jun 17 '16 at 06:55

score 1 · Answer 1 · answered Jun 17 '16 at 07:08

First of all, you have to write the code for creating graphics, inside the d3.csv function callback because d3.csv method is asynchronous.

 d3.csv("test.csv",function(error,data){        
        var win = data;
        //drawPoint();
        //drawLine();
 });

Circle and line can be created as shown in following code snippet. Please note that I have used some custom calculations to make circles more visible.

var tooltip = d3.select('.toolt1');

var width = 1302,
  height = 605;

var win = [{
  "cn": 1,
  "lm": 4.5,
  "ln": 3.2
}, {
  "cn": 2,
  "lm": 3.6,
  "ln": 5.7
}];

var svg = d3.select("#area1").append("svg")
  .attr("width", width)
  .attr("height", height);

//To create points only using first object 

//var point = win[0];
//drawPoint(point.cn, point.lm, 1.5);
//drawPoint(point.cn, point.ln, 1.5);
//drawLine(point);

win.forEach(function(point){
  drawPoint(point.cn, point.lm, 1.5);
  drawPoint(point.cn, point.ln, 1.5);
  drawLine(point);
});

function drawPoint(v1, v2, r) {
  svg.append("circle")
    .attr("cx", v1 * 50)
    .attr("cy", v2 * 30)
    .attr("r", r + 5);
}

function drawLine(point) {
  svg.append("line")
    .attr("x1", point.cn * 50)
    .attr("y1", point.lm * 30)
    .attr("x2", point.cn * 50)
    .attr("y2", point.ln * 30)
    .style("stroke", "green");
}

div {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="area1"></div>

2 circles and 1 line in one data entry in d3.js

1 Answers1