Javascript 使用D3.js创建散点图

我在上面有两个数据集，从中我试图创建一个混合了散点图和线图的图形，就像回归图一样。我可以得到

数据1的行，但不能得到
数据的点。请帮我做这个！我不确定问题出在哪里，可能是我没有创建圆，或者圆属性中的函数工作不正常

我的代码如下：
index.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.append('svg:circle') //problem
    .datum(data)
   .attr("cx", function(d) {
    return (d.x);
    })
   .attr("cy", function(d) {
    return (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);

另外，使用
cx
和
cy
位置的刻度

以下是您的更新代码：


var数据=[{
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.117056178178
}, {
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
}];
变量数据1=[{
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.722139
}, {
x:310.33848，
y:2039.1274463
}, {
x:262.29109，
y:2102.390809
}, {
x:275.85243，
y:2274.22971053
}, {
x:303.52616，
y:2600.81824356
}];
功能绘图图（数据，数据1）{
var svgWidth=600，
Svghight=400；
var保证金={
前20名，
右:20,，
底数：30，
左：50
};
var width=svgWidth-margin.left-margin.right；
变量高度=SVGHIGHT-margin.top-margin.bottom；
var svg=d3。选择（'svg'）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）；
var g=svg.append（“g”）
.attr（“转换”，
翻译（“+margin.left+”，“+margin.top+”）
);
var x=d3.scaleLinear（）.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）.rangeRound（[height，0]）；
var line=d3.line（）
.x（功能（d）{
返回x（d.x）
})
.y（功能（d）{
返回y（d.y）
})
x、 域（d3.范围（数据1，函数（d））{
返回d.x
}));
y、 域（d3.范围（数据1，函数（d））{
返回d.y
}));
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.append（“文本”）
.attr（“填充”、“千”）
.text（“国外出口（$）”）
.attr（“dy”，“0.71em”）
.attr（“y”，20）
.attr（“x”，500）
.select（“.domain”）
.删除（）
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.90em”）
.attr（“文本锚定”、“中心”）
.text（“价格（$）”）
g、 selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回x（d.x）；
})
.attr（“cy”，函数（d）{
返回y（d.y）；
})
.attr（“r”，8）；
g、 附加（“路径”）
.基准（数据1）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）；
}
图纸（数据，数据1）

.折线图{
边框：1px实心浅灰色；
}
圈{
填充：钢蓝；
}

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.append('svg:circle') //problem
    .datum(data)
   .attr("cx", function(d) {
    return (d.x);
    })
   .attr("cy", function(d) {
    return (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);

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