在ScatterPlot d3js

Question

我正在学习使用来自外部csv文件的数据创建ScatterPlot以下是我的文件的样子

x,y
5,20 
480,90
250,50 
100,33 
330,95
410,12
475,44
25,67
85,21
220,88
10,10

我的JS＆amp; CSS代码是

//Call csv File 
d3.csv("data.csv", function (error, data) {
    //Check For Error
    if (error) console.log("Error");
    /*
    Check For Data
    data.forEach(function (d) {
        console.log("X Is "+ d.x);
        console.log("Y Is "+ d.y);
    });
    */
    //Create Margin
    var margin = { top: 40, right: 20, bottom: 60, left: 60 },
        width = 960 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;
    /*
   define scale then followed by axis
   */
    // define x and y scales
    // define x and y scales
    xMax = d3.max(data, function (d) {
        return d.x;
    });
    yMax = d3.max(data, function (d) {
        return d.y;
    });
    console.log(xMax);
    var xScale = d3.scale.linear().
        domain([0, xMax]).
        range([0, width]);
    var yScale = d3.scale.linear().
        domain([0, yMax]).
        range([height, 0]);
    // define x axis and y axis
    var xAxis = d3.svg.axis().
        scale(xScale).
        orient("bottom");
    var yAxis = d3.svg.axis().
        scale(yScale).
        orient("left");
    /*
    Create Tooltip
    */
    var toolTip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function (d) {
          
          return ('X = '+ d.x +" Y = "+d.y);
      });
    /*
   create svg element then append height and width and g which act as a container
   */
    var svg = d3.select("body").
      append("svg").
      attr({
          "width": width + margin.right + margin.left,
          "height": height + margin.top + margin.bottom
      }).
    append("g").
      attr("transform", "translate(" + margin.left + "," + margin.right + ")");

    //call toolTip
    svg.call(toolTip);
    // Draw xAxis
    svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);
    //Draw yAxis
    svg.append("g")
     .attr("class", "y axis")
     .call(yAxis);
    /*
 create bar or bind data
 */
    //bind data
    svg.selectAll("circle")
      .data(data)
   //enter data
    .enter().
        append("circle")
   //update data
      .attr("class", "circle")
      .attr("cx", function (d) { return xScale(d.x); })
      .attr("cy", function (d) { return yScale(d.y); })
      .attr("r", 8)
      .on('mouseover', toolTip.show)
      .on('mouseout', toolTip.hide);
});

svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color:antiquewhite;
}
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered ;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

输出我好像是

哪个只显示四个圆圈，但我在我的csv文件中有更多然后10个输入。任何一个点我都错了

Answer 1

2件事：

  xMax = d3.max(data, function (d) {
        return d.x;
    });
    yMax = d3.max(data, function (d) {
        return d.x;
    });

1）csv解析默认返回字符串。它将返回最大值作为x的字母最大值，即数据中的“85”。查看截图并查看x轴的结束位置......

2）你正在使用d.x计算最大y值

应该是：

  xMax = d3.max(data, function (d) {
        return +d.x;
    });
    yMax = d3.max(data, function (d) {
        return +d.y;
    });