时间戳

首页 > 解决方案 > 如果没有 d3 中的缩放事件，我的矩形没有很好的坐标

javascript - 如果没有 d3 中的缩放事件，我的矩形没有很好的坐标

问题描述

我正在放大图表。但我有一个问题。我的矩形需要一个缩放事件才能显示在正确的位置，如果它们没有这个事件，它们就会显示在错误的坐标处。

我做了一个 jsfiddle https://jsfiddle.net/Natko/mr1250un/90/

问题出在这部分代码中（我认为）

   this.chart.selectAll()
        .data(this.viewpoint)
        .join("g")
        .attr("x", d => this.x(d.x))
        .attr("y", d => this.y(d.y))
        .append("rect")
        .attr("id", 'rectangle')
        .attr("width", 10)
        .attr("height", 10)
        .attr('fill', 'orange')
    }

除 x 和 y 坐标外，所有属性都有效。但是当我使用缩放事件更新坐标时，它们会显示在正确的位置。

change(d) {
    var newX = d.transform.rescaleX(this.x);
    var newY = d.transform.rescaleY(this.y);

    this.xAxis.call(d3.axisBottom(newX))
    this.yAxis.call(d3.axisLeft(newY))

      this.chart.selectAll("#rectangle")
       .attr("x", d => newX(d.x) - 2)
       .attr("y", d => newY(d.y) - 5 )
  },

这是this.x和this.y

  this.x = d3.scaleLinear()
    .range([0, width - margin.left - margin.right]);

  this.y = d3.scaleLinear()
    .range([height - margin.top - margin.bottom, 0]);

  this.xAxis = this.chart.append("g")
    .attr(
      "transform",
      `translate(0, ${height - margin.top - margin.bottom})`
    );

  this.yAxis = this.chart.append("g");

有人有解决我问题的想法吗？

标签： javascriptvue.jsd3.js

解决方案

您的代码有多个错误，以下是要点：

  1. 您添加一个<g>元素并根据 and 设置它transform（我在小提琴中看到它，而不是在问题的代码示例中）x，y没关系。

  2. 您<rect>在每个下添加一个<g>并将相同的分配id给所有。它不会起作用，id应该是独一无二的。您根本不需要该属性，请忽略它。

  3. 您不能对元素使用x和y属性。<g>你应该使用变换：g.attr('transform', 'translate(x, y)')

  4. 在“更改”中，您尝试在<rect>其中设置坐标，而不是为元素本身<g>分配新的坐标。保持原样。transform<g><rect>

  5. 您可以transform使用一个简单的公式计算：transformedX = originalX * e.transform.k + e.transform.x，其中e是 D3 缩放事件。

推荐阅读