使用D3.js创建散点图

时间：2019-05-08 03:14:32

标签： javascript css d3.js 

<div class={"float-right "+isAddingVarian || isEditingVarian?"d-none":''}>

我上面有两个数据集，就像在回归图的情况下一样，我试图从它们中创建一个包含散点图和折线图的图形。我可以得到var data=[{x: 33.46995, y: 398.86988594407546},{x: 34.78498, y: 407.06546535069833},{x: 33.21872, y: 397.3041608926882},{x: 36.82249, y: 419.76371177609417},{x: 44.56029, y: 467.98751985086545},{x: 43.82672, y: 463.4157373171466},{x: 52.71943, y: 518.8372189145773},{x: 63.84255, y: 588.1591455697828},{x: 83.53594, y: 710.8930311317798},{x: 103.09053, y: 832.7618821153723},{x: 126.41405, y: 978.1196003438209},{x: 163.13218, y: 1206.9557106057173},{x: 185.29536, y: 1345.0819142613568},{x: 178.75143, y: 1304.2985876860075},{x: 249.81555, y: 1747.1870681174632},{x: 305.96392, y: 2097.1170506178178},{x: 300.40058, y: 2062.4449939072933},{x: 314.4053, y: 2149.7257364207867},{x: 310.33848, y: 2124.380347918287},{x: 262.29109, y: 1824.9375975430276},{x: 275.85243, y: 1909.4550905509523},{x: 303.52616, y: 2081.9243510943934}]; var data1=[{x: 33.46995, y: 387.6560178},{x: 34.78498, y: 410.32030047},{x: 33.21872, y: 415.73087417},{x: 36.82249, y: 452.69999839},{x: 44.56029, y: 462.14679934},{x: 43.82672, y: 478.96549106},{x: 52.71943, y: 508.06895207},{x: 63.84255, y: 599.59290202},{x: 83.53594, y: 699.68885293},{x: 103.09053, y: 808.90107722},{x: 126.41405, y: 920.31652973},{x: 163.13218, y: 1201.11176841},{x: 185.29536, y: 1186.95275764},{x: 178.75143, y: 1323.94029587},{x: 249.81555, y: 1656.61707312},{x: 305.96392, y: 1823.04992777},{x: 300.40058, y: 1827.63785914},{x: 314.4053, y: 1856.72212139},{x: 310.33848, y: 2039.1274463},{x: 262.29109, y: 2102.390809},{x: 275.85243, y: 2274.22971053},{x: 303.52616, y: 2600.81824356}] 的线，但不能得到data1的点。请在这件事上给予我帮助！我不确定是什么问题，也许我没有创建圆，或者圆属性中的功能无法正常工作。

我的代码如下： index.html 

data

regression.js 

<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">
  <head>
    <style>
      .line-chart{
        border:1px solid lightgray;
      }
      circle {
    fill: steelblue;
}
  </style>
  </head>
  <body>
      <svg class='line-chart'></svg>
      <script src="https://d3js.org/d3.v4.min.js"></script>  </body>

      <script src="./regression.js"></script>
  </body>
</htmL>

1 个答案:

答案 0 :(得分：1)

虽然路径只是一个一个元素（因此datum），但是您有多个圆圈。

因此，您需要输入选择：

g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    //etc...

此外，请同时使用cx和cy位置的比例尺。

这是您更新的代码：

var data = [{
  x: 33.46995,
  y: 398.86988594407546
}, {
  x: 34.78498,
  y: 407.06546535069833
}, {
  x: 33.21872,
  y: 397.3041608926882
}, {
  x: 36.82249,
  y: 419.76371177609417
}, {
  x: 44.56029,
  y: 467.98751985086545
}, {
  x: 43.82672,
  y: 463.4157373171466
}, {
  x: 52.71943,
  y: 518.8372189145773
}, {
  x: 63.84255,
  y: 588.1591455697828
}, {
  x: 83.53594,
  y: 710.8930311317798
}, {
  x: 103.09053,
  y: 832.7618821153723
}, {
  x: 126.41405,
  y: 978.1196003438209
}, {
  x: 163.13218,
  y: 1206.9557106057173
}, {
  x: 185.29536,
  y: 1345.0819142613568
}, {
  x: 178.75143,
  y: 1304.2985876860075
}, {
  x: 249.81555,
  y: 1747.1870681174632
}, {
  x: 305.96392,
  y: 2097.1170506178178
}, {
  x: 300.40058,
  y: 2062.4449939072933
}, {
  x: 314.4053,
  y: 2149.7257364207867
}, {
  x: 310.33848,
  y: 2124.380347918287
}, {
  x: 262.29109,
  y: 1824.9375975430276
}, {
  x: 275.85243,
  y: 1909.4550905509523
}, {
  x: 303.52616,
  y: 2081.9243510943934
}];
var data1 = [{
  x: 33.46995,
  y: 387.6560178
}, {
  x: 34.78498,
  y: 410.32030047
}, {
  x: 33.21872,
  y: 415.73087417
}, {
  x: 36.82249,
  y: 452.69999839
}, {
  x: 44.56029,
  y: 462.14679934
}, {
  x: 43.82672,
  y: 478.96549106
}, {
  x: 52.71943,
  y: 508.06895207
}, {
  x: 63.84255,
  y: 599.59290202
}, {
  x: 83.53594,
  y: 699.68885293
}, {
  x: 103.09053,
  y: 808.90107722
}, {
  x: 126.41405,
  y: 920.31652973
}, {
  x: 163.13218,
  y: 1201.11176841
}, {
  x: 185.29536,
  y: 1186.95275764
}, {
  x: 178.75143,
  y: 1323.94029587
}, {
  x: 249.81555,
  y: 1656.61707312
}, {
  x: 305.96392,
  y: 1823.04992777
}, {
  x: 300.40058,
  y: 1827.63785914
}, {
  x: 314.4053,
  y: 1856.72212139
}, {
  x: 310.33848,
  y: 2039.1274463
}, {
  x: 262.29109,
  y: 2102.390809
}, {
  x: 275.85243,
  y: 2274.22971053
}, {
  x: 303.52616,
  y: 2600.81824356
}];

function drawChart(data, data1) {
  var svgWidth = 600,
    svgHeight = 400;
  var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;

  var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  var g = svg.append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")"
    );
  var x = d3.scaleLinear().rangeRound([0, width]);

  var y = d3.scaleLinear().rangeRound([height, 0]);

  var line = d3.line()
    .x(function(d) {
      return x(d.x)
    })
    .y(function(d) {
      return y(d.y)
    })
  x.domain(d3.extent(data1, function(d) {
    return d.x
  }));
  y.domain(d3.extent(data1, function(d) {
    return d.y
  }));

  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .text("Foreign Export ($)")
    .attr("dy", "0.71em")
    .attr("y", 20)
    .attr("x", 500)
    .select(".domain")
    .remove()

  g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.90em")
    .attr("text-anchor", "center")
    .text("Price ($)")

  g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return x(d.x);
    })
    .attr("cy", function(d) {
      return y(d.y);
    })
    .attr("r", 8);

  g.append("path")
    .datum(data1)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
}
drawChart(data, data1);
<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">

  <head>
    <style>
      .line-chart {
        border: 1px solid lightgray;
      }

      circle {
        fill: steelblue;
      }

    </style>
  </head>

  <body>
    <svg class='line-chart'></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </body>

</htmL>

最后，在我看来，您正在交换数据集，也许这就是您想要的：

var data = [{
  x: 33.46995,
  y: 398.86988594407546
}, {
  x: 34.78498,
  y: 407.06546535069833
}, {
  x: 33.21872,
  y: 397.3041608926882
}, {
  x: 36.82249,
  y: 419.76371177609417
}, {
  x: 44.56029,
  y: 467.98751985086545
}, {
  x: 43.82672,
  y: 463.4157373171466
}, {
  x: 52.71943,
  y: 518.8372189145773
}, {
  x: 63.84255,
  y: 588.1591455697828
}, {
  x: 83.53594,
  y: 710.8930311317798
}, {
  x: 103.09053,
  y: 832.7618821153723
}, {
  x: 126.41405,
  y: 978.1196003438209
}, {
  x: 163.13218,
  y: 1206.9557106057173
}, {
  x: 185.29536,
  y: 1345.0819142613568
}, {
  x: 178.75143,
  y: 1304.2985876860075
}, {
  x: 249.81555,
  y: 1747.1870681174632
}, {
  x: 305.96392,
  y: 2097.1170506178178
}, {
  x: 300.40058,
  y: 2062.4449939072933
}, {
  x: 314.4053,
  y: 2149.7257364207867
}, {
  x: 310.33848,
  y: 2124.380347918287
}, {
  x: 262.29109,
  y: 1824.9375975430276
}, {
  x: 275.85243,
  y: 1909.4550905509523
}, {
  x: 303.52616,
  y: 2081.9243510943934
}];
var data1 = [{
  x: 33.46995,
  y: 387.6560178
}, {
  x: 34.78498,
  y: 410.32030047
}, {
  x: 33.21872,
  y: 415.73087417
}, {
  x: 36.82249,
  y: 452.69999839
}, {
  x: 44.56029,
  y: 462.14679934
}, {
  x: 43.82672,
  y: 478.96549106
}, {
  x: 52.71943,
  y: 508.06895207
}, {
  x: 63.84255,
  y: 599.59290202
}, {
  x: 83.53594,
  y: 699.68885293
}, {
  x: 103.09053,
  y: 808.90107722
}, {
  x: 126.41405,
  y: 920.31652973
}, {
  x: 163.13218,
  y: 1201.11176841
}, {
  x: 185.29536,
  y: 1186.95275764
}, {
  x: 178.75143,
  y: 1323.94029587
}, {
  x: 249.81555,
  y: 1656.61707312
}, {
  x: 305.96392,
  y: 1823.04992777
}, {
  x: 300.40058,
  y: 1827.63785914
}, {
  x: 314.4053,
  y: 1856.72212139
}, {
  x: 310.33848,
  y: 2039.1274463
}, {
  x: 262.29109,
  y: 2102.390809
}, {
  x: 275.85243,
  y: 2274.22971053
}, {
  x: 303.52616,
  y: 2600.81824356
}];

function drawChart(data, data1) {
  var svgWidth = 600,
    svgHeight = 400;
  var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;

  var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  var g = svg.append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")"
    );
  var x = d3.scaleLinear().rangeRound([0, width]);

  var y = d3.scaleLinear().rangeRound([height, 0]);

  var line = d3.line()
    .x(function(d) {
      return x(d.x)
    })
    .y(function(d) {
      return y(d.y)
    })
  x.domain(d3.extent(data1, function(d) {
    return d.x
  }));
  y.domain(d3.extent(data1, function(d) {
    return d.y
  }));

  g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .text("Foreign Export ($)")
    .attr("dy", "0.71em")
    .attr("y", 20)
    .attr("x", 500)
    .select(".domain")
    .remove()

  g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.90em")
    .attr("text-anchor", "center")
    .text("Price ($)")

  g.selectAll(null)
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return x(d.x);
    })
    .attr("cy", function(d) {
      return y(d.y);
    })
    .attr("r", 8);

  g.append("path")
    .datum(data1)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
}
drawChart(data1, data);
<!DOCTYPE html>
<htmL>
  <meta charset="utf-8">

  <head>
    <style>
      .line-chart {
        border: 1px solid lightgray;
      }

      circle {
        fill: steelblue;
      }

    </style>
  </head>

  <body>
    <svg class='line-chart'></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </body>

</htmL>

如果是正确的话，则不需要庞大的数组或对象，也不需要<path>：只需使用<line>，x1，{{1 }}和x2。

相关问题
最新问题