如何使用 D3 将 XY 坐标数据添加到四象限散点图中？答案

【问题标题】：How to add XY coordinate data to a four quadrant scatter-plot using D3?如何使用 D3 将 XY 坐标数据添加到四象限散点图中？
【发布时间】：2017-07-22 17:48:36
【问题描述】：

这可能是一个非常基本的问题，但我是 D3/JS 的新手，希望能提供任何帮助。

我正在尝试将坐标数据添加到四象限散点图中，但我不确定如何使用 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 坐标有什么建议吗？我真的很感激。

提前谢谢你！

【问题讨论】：

标签： html d3.js scatter-plot

【解决方案1】：

对于 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="d3@3.5.17" 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>

【讨论】：

这非常有用。非常感谢！