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

使用d3.js

1 个答案: