Question

我正在尝试使用包含json的变量绘制散点图。我有大约800分的情节。这是我的代码：

var data = json_games;

var svg = d3.select("svg"),
margin = {top: 30, right: 30, bottom: 30, left: 400},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 data.forEach(function(d) {
  d.Component1 = +d.Component1;
  d.Component2 = +d.Component2;
 });

 var x = d3.scaleLinear().range([0, width]).domain([d3.min(data, function(d) {  return d.Component1; }),d3.max(data, function(d) { return d.Component1; })]);
 var y = d3.scaleLinear().range([0, height]).domain([d3.min(data, function(d) { return d.Component2; }),d3.max(data, function(d) { return d.Component2; })]);


// Add the scatterplot
g.selectAll("dot")
  .data(data)
.enter().append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {
      return x(d.Component1); })
  .attr("cy", function(d) {
      return y(d.Component2); });

// Add the X Axis
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// Add the Y Axis
g.append("g")
  .call(d3.axisLeft(y));

由于数据量很大，为了找到x和y组件的最大值和最小值，我使用了cgrome控制台，我得到的值如下：

>d3.min(data, function(d) {  return d.Component1; })
>-0.20829495230931433
>d3.max(data, function(d) {  return d.Component1; })
>0.35130959917777926
>d3.min(data, function(d) {  return d.Component2; })
>-1.2035701018868445
>d3.max(data, function(d) {  return d.Component2; })
>0.7208057297018022

and the scaled values of x and y that I am getting are:
x(0.6)
>1169.967094854204
y(0.6)
>468.6117109457583

因此，散点图中的点被绘制在角落中。有人可以请帮助。我也尝试过d3.extent，但值相同。任何帮助将受到高度赞赏。

d3 v4比例返回不正确的值

0 个答案: