如何在鼠标指针上方以像素为单位显示 SVG 的条形长度 [英] How to show the barlength in px of a SVG above the mouse pointer

问题描述

我想在鼠标指针上方显示以 px 乘以 2 为单位的条形长度.

我用 var txt = svg.append("text") 和 txt.text(distance); 尝试过，但最终出现错误.>

我需要如何编辑以下代码，以便在条长增加时同时在鼠标指针上方显示条长*2?

px 长度 * 2 应显示在鼠标指针上方并停留在鼠标停止点击的位置，例如:

到目前为止代码有效:

函数拉伸(刷){var xy0, bluebar, 停留 = 假,bar = d3.svg.line().x(function(d) {返回 d[0];}).y(函数(d){返回 d[1];});Brush.on('mousedown', function() {保持=真；xy0 = d3.mouse(this);bluebar = d3.select('svg').append('path').attr('d', bar([xy0, xy0])).style({'stroke': '浅蓝色','描边宽度':'50px'});}).on('mouseup', function() {停留=假；}).on('mousemove', function() {如果(停留){Bar = bar([xy0, d3.mouse(this).map(function(x) {返回 x - 1;})]);bluebar.attr('d', Bar);}});}d3.select('body').append('svg').call(stretch);

<script src="https://d3js.org/d3.v3.min.js"></script>

解决方案

我对您的代码进行了一些更新:

• 为文本元素添加一个新变量
• 在 mousedown 上创建文本元素，但不要添加文本
• 更新mousemove上的文本元素位置，根据xy0和xy1之间的距离计算标签文本，然后对标签位置

根据指针细化标签方向以及指针是否向左/向右、向上/向下拖动；您可以使用 dx 和 dy 属性，我只是为了示例的目的硬编码了一些合理的东西.

函数拉伸(刷){var foo;//文本元素的变量var xy0, bluebar, 停留 = 假,bar = d3.svg.line().x(function(d) {返回 d[0];}).y(函数(d){返回 d[1];});Brush.on('mousedown', function() {保持=真；xy0 = d3.mouse(this);bluebar = d3.select('svg').append('path').attr('d', bar([xy0, xy0])).style({'stroke': '浅蓝色','描边宽度':'50px'});//追加元素但没有实际文本foo = d3.select('svg').append('文本').attr('x', xy0[0]).attr('y', xy0[1]).文本("");//从无文本开始}).on('mouseup', function() {停留=假；}).on('mousemove', function() {如果(停留){//新点var xy1 = d3.mouse(this).map(function(x) {返回 x - 1;});//绘制条形图的代码Bar = bar([xy0, xy1]);bluebar.attr('d', Bar);//两点之间的距离公式(用于文本)var dx = Math.abs(xy1[0] - xy0[0]);var dy = Math.abs(xy1[1] - xy0[1]);var d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));//移动并计算文本foo.attr('x', xy1[0]).attr('y', xy1[1]).text((d * 2).toFixed(0) + "px");//定位标签如果 (xy1[0] >= xy0[0]) {foo.attr('dx', '0.35em');} 别的 {foo.attr('dx', '-2.35em');}如果 (xy1[1] 

<script src="https://d3js.org/d3.v3.min.js"></script>

I would like to show the barlength in px multiplied by 2, above the mouse pointer.

I tried it with var txt = svg.append("text") and then txt.text(distance); but ended up with errors.

How do I need to edit the following code so that the barlength*2 is shown above the mouse pointer simultaneously as the barlength is increasing?

The px length * 2 should be shown above the mousepointer and stay at the place where the mouse stopped being clicked for example like this:

This far the code worked:

function stretch(brush) {
  var xy0, bluebar, stay = false,
    bar = d3.svg.line().x(function(d) {
      return d[0];
    }).y(function(d) {
      return d[1];
    });

  brush.on('mousedown', function() {
    stay = true;
    xy0 = d3.mouse(this);
    bluebar = d3.select('svg').append('path').attr('d', bar([xy0, xy0])).style({
      'stroke': 'lightblue',
      'stroke-width': '50px'
    });

  }).on('mouseup', function() {
    stay = false;
  }).on('mousemove', function() {
    if (stay) {
      Bar = bar([xy0, d3.mouse(this).map(function(x) {
        return x - 1;
      })]);

      bluebar.attr('d', Bar);
    }
  });
}
d3.select('body').append('svg').call(stretch);

<script src="https://d3js.org/d3.v3.min.js"></script>

解决方案

I made a few updates to your code:

• add a new variable for the text element
• create the text element on mousedown but don't add text yet
• update the text element position on mousemove and calculate the label text from the distance between xy0 and xy1, then make slight adjustment to the label position

To refine the label orientation with respect to the pointer and whether the pointer is dragging left/ right, up/ down; you can play with the dx and dy attributes where I have just hardcoded something reasonable for the purpose of the example.

function stretch(brush) {
  var foo; // variable for text element
  var xy0, bluebar, stay = false,
    bar = d3.svg.line().x(function(d) {
      return d[0];
    }).y(function(d) {
      return d[1];
    });

  brush.on('mousedown', function() {
    stay = true;
    xy0 = d3.mouse(this);
    bluebar = d3.select('svg').append('path').attr('d', bar([xy0, xy0])).style({
      'stroke': 'lightblue',
      'stroke-width': '50px'
    });
    // append the element but no actual text
    foo = d3.select('svg')
      .append('text')
      .attr('x', xy0[0])
      .attr('y', xy0[1])
      .text(""); // start with no text

  }).on('mouseup', function() {
    stay = false;
  }).on('mousemove', function() {
    if (stay) {
      // new point
      var xy1 = d3.mouse(this).map(function(x) {
        return x - 1;
      }); 
      // your code to draw the bar
      Bar = bar([xy0, xy1]);
      bluebar.attr('d', Bar);
      
      // formula for distance between two points (for text)
      var dx = Math.abs(xy1[0] - xy0[0]);
      var dy = Math.abs(xy1[1] - xy0[1]);
      var d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

      // move and calculate the text
      foo.attr('x', xy1[0])
        .attr('y', xy1[1])
        .text((d * 2).toFixed(0) + "px");
        
      // orient the label 
      if (xy1[0] >= xy0[0]) {
        foo.attr('dx', '0.35em');
      } else {
        foo.attr('dx', '-2.35em');
      }
      if (xy1[1] < xy0[1]) {
        foo.attr('dy', '0em');
      } else {
        foo.attr('dy', '0.75em');
      }
    }
  });
}
d3.select('body').append('svg').call(stretch);

<script src="https://d3js.org/d3.v3.min.js"></script>

这篇关于如何在鼠标指针上方以像素为单位显示 SVG 的条形长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！