d3.js

Question

我的数据集看起来像 CN，LM，LN 1,4.5,3.2 2,3.6,5.7 我想用on（1,4.5）和on（1,3.2）制作两个圆圈，并在它们之间划一条线我试图做出功能，但我认为有问题我无法弄清楚请帮助。 / p>

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);
    }

}

Answer 1

首先，你必须在d3.csv函数回调中编写用于创建图形的代码，因为d3.csv方法是异步的。

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

可以创建圆和线，如下面的代码片段所示。请注意，我使用了一些自定义计算来使圆圈更明显。

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>