javascript - 使用 d3.js 中的 scale() 值无法正确绘制数据

Question

我在 d3 中创建了一个图表，并创建了 xaxis 和 yaxis。在图表中绘制数据时，点未正确绘制。这是Plnkr链接

我使用 xAxisScale 和 yAxisScale 设置 cx 和 cy 值。但它不能正常工作。这是数据:

var data = [{
          "x": 82,
          "y": 1730
        }, {
          "x": 533,
          "y": 16385
        }, {
          "x": 41,
          "y": 783
        }, {
          "x": 20.5,
          "y": 5873
        }, {
          "x": 553.5,
          "y": 25200
        }, {
          "x": 61.5,
          "y": 30952
        }, {
          "x": 184.5,
          "y": 2853
        }, {
          "x": 1476,
          "y": 83775
        }];

这是 JS 代码:

    var xAxisScale = d3.scale.linear()
      .domain([800, 83800])
      .range([0, containerWidth]);

    var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");

    chartContainer.append('g')
      .attr("class", "xAxis")
      .call(xAxis)
      .attr('transform', 'translate(50 ,' + (containerHeight - 20) + ')');

    /* Code for adding y axis in chart
     * 
     * */
    var yAxisScale = d3.scale.linear()
      .domain([500, 1500])
      .range([containerHeight, 0]);

    var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");

    chartContainer.append('g')
      .attr("class", "yAxis")
      .call(yAxis)
      .attr('transform', 'translate(50 ,-20)');

    chartContainer.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return yAxisScale(d.x);
      })
      .attr("cy", function(d) {
        return xAxisScale(d.y);
      })
      .attr("r", 4)
      .attr("fill", "red")
      .attr({
        "z-index": "9999"
      });

我不知道我在哪里缺少人。

Answer 1

设置域和范围的正确方法是:

var xAxisScale = d3.scale.linear()
         .domain([0, d3.max(data, function(d) { return d.x; })])
       .range([padding, containerWidth - padding * 2]);

您没有考虑填充，而是对域进行硬编码 .domain([800, 83800])。

y 轴刻度相同:

    var yAxisScale = d3.scale.linear()
      .domain([0, d3.max(data, function(d){return d.y})])
      .range([containerHeight-padding, padding ]);

y 轴和 x 轴的翻译应该是:

    chartContainer.append('g')
      .attr("class", "xAxis")
      .call(xAxis)
      .attr('transform', 'translate(0 ,' + (containerHeight -padding) + ')');


    chartContainer.append('g')
      .attr("class", "yAxis")
      .call(yAxis)
      .attr('transform', 'translate('+padding + ',0)');

而不是

chartContainer.append('g')
      .attr("class", "xAxis")
      .call(xAxis)
      .attr('transform', 'translate(50 ,' + (containerHeight - 20) + ')');

最后

你像这样进行中心计算:

.attr("cx", function(d) {
        return yAxisScale(d.x);
      })
      .attr("cy", function(d) {
        return xAxisScale(d.y);
      })

应该是:

.attr("cx", function(d) {
            return xAxisScale(d.x);//hey! you passing x value in yaxis :)
          })
          .attr("cy", function(d) {
            return yAxisScale(d.y);
          })

工作代码here