d3.js-检测具有相同中心的圆

时间:2018-10-05 07:00:21

标签: javascript d3.js svg

在检测具有相同中心点的圆时出现问题。我在图上有N个圆,其中一些圆的中心位置(x,y)可以完全相同。我想通过在该圆圈内显示“ +1”来表明这一点。

我想问你是否知道如何实现?如何检测哪些数据元素完全位于同一位置?我不想将每个点都相互比较,希望有更好的解决方案。

现在,基于数据生成圆看起来像这样。

this.svg
      .selectAll('circle')
      .data(this.data.suppliers)
      .enter()
      .append('circle')
      .classed('chart-item', true)
      .style('fill', function(supplier, idx) {
        return 'red';
      })
      .attr('cx', supplier => {
        if (supplier.x) return this.xScale(supplier.x);
        else return 0;
      })
      .attr('cy', supplier => {
        if (supplier.y) return this.yScale(supplier.y);
        else return 0;
      })
      .attr('r', supplier => {
          return 10;
        }
      })
      //HIGHLIGHT selected supplier
      .classed('highlighted', supplier => {
        if (
          supplier.id === this.data.selectedSupplier.id &&
          supplier.id === this.data.selectedSupplier.id
        ) {
          return true;
        } else {
          return false;
        }
      })
      // .select(function(supplier){that.showTooltip({left:120,top:120},supplier)})
      .on('mousemove', function(supplier) {
        that.handleMouseMove(this, supplier);
      })
      .on('mouseout', function() {
        that.handleMouseOut(this);
      });

0 个答案:

没有答案