Question

我在D3中有一个基本（垂直）滑块，如下所示：

 var line = canvas.append("line")
  .attr("y1", y1)
  .attr("y2", y2)
  .attr("x1", x)
  .attr("x2", x)
  .style("stroke", "black")
  .style("stroke-linecap", "round")
  .style("stroke-width", 5);

var circle = canvas.append("circle")
  .attr("r", radius)
  .attr("cy", function(d) { == return d.y; })
  .attr("cx", function(d) { return d.x; })
  .style("cursor", "ew-resize")
  .call(drag);

函数调用拖动的位置如下：

var drag = d3.behavior.drag()
  .origin(function(d) { return d; })
  .on("drag", dragmove);

这次对dragmove的调用如下：

function dragmove(d) {
  var y = d3.event.y;
  y = y < y1 ? y1 : y > y2 ? y2 : y;
  d.y = y;
  authorMin = (y-y1)/(y2-y1);
  circle.attr("cy", y);
}

我需要检索滑块的值（我假设在这种情况下是cy）并在圆圈旁边的屏幕上显示。我在dragmove函数中添加了一个基于该块的y的变量集。然后将此变量用作＆＃34;文本＆＃34;附加到画布的元素（var canvas = d3.select（＆＃34; svg＆＃34;））。

这似乎没有在屏幕上显示任何内容，即便如此，我不知道如何根据其位置更新圆圈旁边显示的值（并用最新的值替换旧值。

我希望该值为0-100的百分比，所以查看我的代码行，这看起来像（（y-y1）/（y2-y1））* 100。我是否需要在circle元素和dragmove函数中使用代码？我不确定我是否在思考这个问题，所以你可能提供的任何帮助或提示都会非常有帮助。如果这是一个简单的解决方案，我很抱歉，因为我对D3很新！

提前致谢！

Answer 1

要获得圆圈的位置，只需使用吸气剂......

var value = circle.attr("cy");

使用数学更新文本变量（此处命名为text）以获取百分比：

text.text("Value: " + ~~(100*(value-y1)/(y2-y1)) + "%")

以下是演示：

＆＃13;

var width = 50;
	var height = 300;
  
  var canvas = d3.select("svg")
	  .attr("width", 1600)
	  .attr("height", 1000)
	  .datum({
	    x: width / 2,
	    y: height / 2,
	  });
    
	var radius = 10;
	var margin = 10;
	var y1 = margin;
	var y2 = height - margin;
	var x = width / 2;

	var drag = d3.behavior.drag()
	  .origin(function(d) {
	    return d;
	  })
	  .on("drag", dragmove);
    
  var text = canvas.append("text")
  	.attr("x", 50)
    .attr("y", height/2)
    .text("Value: 50%")

	var line = canvas.append("line")
	  .attr("y1", y1)
	  .attr("y2", y2)
	  .attr("x1", x)
	  .attr("x2", x)
	  .style("stroke", "black")
	  .style("stroke-linecap", "round")
	  .style("stroke-width", 5);

	var circle = canvas.append("circle")
	  .attr("r", radius)
	  .attr("cy", function(d) {
	    return d.y;
	  })
	  .attr("cx", function(d) {
	    return d.x;
	  })
	  .style("cursor", "ew-resize")
	  .call(drag);
    
  	function dragmove(d) {
	  var y = d3.event.y;
	  y = y < y1 ? y1 : y > y2 ? y2 : y;
	  d.y = y;
	  circle.attr("cy", y);
    var value = circle.attr("cy");
    text.text("Value: " + ~~(100*(value-y1)/(y2-y1)) + "%")
	}

＆＃13;

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

＆＃13;

D3滑块 - 检索＆amp;显示价值观

1 个答案: