如何使用D3將XY座標數據添加到四象限散點圖？

這可能是一個非常基本的問題，但我是D3/JS的新手，並希望得到任何幫助。如何使用D3將XY座標數據添加到四象限散點圖？

我想將座標數據添加到四象限散點圖，但我不知道如何使用D3添加數據。

這是我的代碼到目前爲止。它會產生一個空的四象限散點圖：

// graph dimensions 
    var width = 750, 
     height = 750, 
     padding = 50; 

    // svg container 
    var vis = d3.select("#graph") 
     .append("svg:svg") 
     .attr("width", width) 
     .attr("height", height); 

    var xScale = d3.scale.linear().domain([1, -1]).range([width - padding, padding]); 
    var yScale = d3.scale.linear().domain([-1, 1]).range([height - padding, padding]); 

    // y axis 
    var yAxis = d3.svg.axis() 
      .orient("left") 
      .scale(yScale); 

    // x axis 
    var xAxis = d3.svg.axis() 
      .orient("bottom") 
      .scale(xScale); 

    var xAxisPlot = vis.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + (height/2) + ")") 
      .call(xAxis.tickSize(-height, 0, 0)); 

    var yAxisPlot = vis.append("g") 
      .attr("class", "axis axis--y") 
      .attr("transform", "translate("+ (width/2) +",0)") 
      .call(yAxis.tickSize(-width, 0, 0));

對於如何將單個XY座標添加到此平面的任何建議？對此，我真的非常感激。

預先感謝您！

來源

2017-07-22 R. Baratheon

隨着d3，您一般使用data-binding。說，我們有以下的陣列中的數據，其中所述陣列的每個成員是與屬性x和y的對象：

var data = [ 
    { 
    x: -0.454, 
    y: 0.786 
    },{ 
    x: -0.454, 
    y: 0.786 
    } 
];

我們將結合這些數據，併產生像這樣對於每個點的圓：

// get all elements with class point 
vis.selectAll(".point") 
    // bind my data to them 
    .data(data) 
    // for all those points that are new 
    .enter() 
    // add a circle 
    .append("circle") 
    // class them appropriately 
    .attr("class", "point") 
    // radius 
    .attr("r", 5) 
    // make em blue 
    .style("fill", "steelblue") 
    // position them 
    .attr("cx", function(d){ 
    return xScale(d.x); 
    }) 
    .attr("cy", function(d){ 
    return yScale(d.y); 
    });

運行代碼：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
    <style> 
 
    body { 
 
     font: 12px Arial; 
 
    } 
 
    
 
    path { 
 
     stroke: steelblue; 
 
     stroke-width: 2; 
 
     fill: none; 
 
    } 
 
    
 
    .axis path, 
 
    .axis line { 
 
     fill: none; 
 
     stroke: grey; 
 
     stroke-width: 1; 
 
     shape-rendering: crispEdges; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="graph"></div> 
 
    <script> 
 
    // graph dimensions 
 
    var width = 750, 
 
     height = 750, 
 
     padding = 50; 
 

 
    // svg container 
 
    var vis = d3.select("#graph") 
 
     .append("svg:svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    var xScale = d3.scale.linear().domain([1, -1]).range([width - padding, padding]); 
 
    var yScale = d3.scale.linear().domain([-1, 1]).range([height - padding, padding]); 
 

 
    // y axis 
 
    var yAxis = d3.svg.axis() 
 
     .orient("left") 
 
     .scale(yScale); 
 

 
    // x axis 
 
    var xAxis = d3.svg.axis() 
 
     .orient("bottom") 
 
     .scale(xScale); 
 

 
    var xAxisPlot = vis.append("g") 
 
     .attr("class", "axis axis--x") 
 
     .attr("transform", "translate(0," + (height/2) + ")") 
 
     .call(xAxis) //.tickSize(-height, 0)); 
 

 
    var yAxisPlot = vis.append("g") 
 
     .attr("class", "axis axis--y") 
 
     .attr("transform", "translate(" + (width/2) + ",0)") 
 
     .call(yAxis) //.tickSize(-width, 0)); 
 
     
 
    var data = d3.range(100).map(function(d){ 
 
     return { 
 
     x: Math.random() > 0.5 ? Math.random() * -1 : Math.random(), 
 
     y: Math.random() > 0.5 ? Math.random() * -1 : Math.random() 
 
     }; 
 
    }); 
 
    
 
    vis.selectAll(".point") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("class", "point") 
 
     .attr("r", 5) 
 
     .style("fill", "steelblue") 
 
     .attr("cx", function(d){ 
 
     return xScale(d.x); 
 
     }) 
 
     .attr("cy", function(d){ 
 
     return yScale(d.y); 
 
     }); 
 
    
 
    
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-22 19:39:59 Mark

這非常有幫助。非常感謝！ –

如何使用D3將XY座標數據添加到四象限散點圖？

回答

相關問題