Wie füge ich XY-Koordinatendaten zu einem Vier-Quadranten-Streudiagramm mit D3 hinzu?

Dies ist wahrscheinlich eine sehr grundlegende Frage, aber ich bin ein Neuling für D3/JS und würde jede Hilfe zu schätzen wissen.Wie füge ich XY-Koordinatendaten zu einem Vier-Quadranten-Streudiagramm mit D3 hinzu?

Ich versuche, Koordinatendaten zu einem vier Quadranten Streudiagramm hinzuzufügen, aber ich bin mir nicht sicher, wie man Daten mit D3 hinzufügt.

Hier ist mein Code so weit. Es erzeugt eine leere Vier-Quadranten-Punktwolke:

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

Irgendwelche Vorschläge, wie ich eine einziger XY-Koordinate zu dieser Ebene hinzufügen könnte? Ich schätze es sehr.

Vielen Dank im Voraus!

Quelle

2017-07-22 R. Baratheon

Mit d3 verwenden Sie normalerweise data-binding. Sagen wir Daten in der folgenden Anordnung haben, wobei jedes Element des Arrays ist ein Objekt mit Eigenschaften x und y:

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

Wir werden diese Daten binden würden und einen Kreis für jeden Punkt erzeugen etwa so:

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

Laufcode:

<!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>

Quelle

2017-07-22 19:39:59 Mark

Das war unglaublich hilfreich. Ich danke dir sehr! –

Wie füge ich XY-Koordinatendaten zu einem Vier-Quadranten-Streudiagramm mit D3 hinzu?

Antwort

Verwandte Themen