如何在Java脚本D3中(x，y)的固定坐标下显示文本

Question

我对Java脚本d3库很陌生，我试图用D3 JS绘制一个图形--我想在(x，y)的特定坐标下显示文本，但它显示在左上角，而不是根据我想要的位置。

任何人都可以帮助我在x，y的特定坐标上显示文本。

下面的代码显示左上角的文本(不是按照x，y轴显示)，但我想在(2,5)坐标处显示。

我们如何找出x，y坐标，在每个路径曲线的中点，我可以显示任何文本。见这里路径曲线

这是我正在运行的代码小提琴

`

 var path0  = [{x: 1.0, y: 8.5},{x: 2.0, y: 5.0}, {x: 1, y: 1.5}];var path1 = [{x: 3, y: 8.5},{x: 4.0, y: 5.0}, {x: 3, y: 1.5}];
  var w = 1200,
      h = 850,
      p = 40,
      x = d3.scale.linear().domain([0, 10]).range([p, w - p]),
      y = d3.scale.linear().domain([0, 10]).range([h - p, p]);



  var line = d3.svg.line()
            .interpolate("cardinal")
            .x(function(d) { console.log(d);return x(d.x); })
            .y(function(d) { console.log(d); return y(d.y); });



  var vis = d3.select("body").append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g"); 

  var rules = vis.selectAll("g.rule")
              .data(x.ticks(10))
              .enter().append("svg:g")
              .attr("class", "rule"); 

  rules.append("svg:line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", p)
        .attr("y2", h - p - 1);

  rules.append("svg:line")
        .attr("class", function(d) { return d ? null : "axis"; })
        .attr("y1", y)
        .attr("y2", y)
        .attr("x1", p)
        .attr("x2", w - p + 1);

  rules.append("svg:text")
        .attr("x", x)
        .attr("y", h - p + 3)
        .attr("dy", ".71em")
        .attr("text-anchor", "middle")
        .text(x.tickFormat(10));

  rules.append("svg:text")
        .attr("y", y)
        .attr("x", p - 3)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .text(y.tickFormat(10)); 

 vis.selectAll("path.path0")
      .data([0])
      .enter().append("svg:path")
      .attr("d", function(d) {  console.log(d);return line.tension(d)(path0); }) 
      .style("stroke","green");



  //it is showing text where I wanted at (241.6,425) coordinates but do not know why it is not taking (2,5) coordinates
  vis.append("text")
        .attr("y", 425)
        .attr("x",241.6)
        .attr("dy", 10)
        .attr("text-anchor", "middle")
        .text("test1"); 

 //it is showing at top left corner. 
        vis.append("text")
        .attr("x",2)
        .attr("y",5)
        .attr("text-anchor", "middle")
        .text("test"); 




  vis.selectAll("path.path1")
      .data([0])
      .enter().append("svg:path")
      .attr("d", function(d) {  console.log(d);return line.tension(d)(path1); })
      .style("stroke","green");

Answer 1

在设置位置时，您使用的是从左上角开始的基于像素的系统。

您所指的(2,5)元素只是x和y轴上的标签，没有任何其他含义。因此，D3将使用(2,5)作为距离像素从左上角.

注意:为了避免出现问题，您甚至可以通过图表维数的子倍数进行工作，如下所示：

vis.append("text")
        .attr("x", (w / 2))             
        .attr("y", (h / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .text("test2");  

小提琴：http://jsfiddle.net/s2yn3b4p/

更新：与x和y轴上的标签对齐：

x = d3.scale.linear().domain([0, 10]).range([p, w - p]),
y = d3.scale.linear().domain([0, 10]).range([h - p, p]);

您可以使用：

.attr("y", 5*(h/10))
.attr("x", 2*(w/10))

Answer 2

你可以用两种方法--直接把x和y上的点作为文本属性

 svg.append("text")
    .attr("x", myXpoint)             
    .attr("y", myypoint)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .text("any text );   

或者，您可以添加一个group元素，并在svg覆盖的任意点上转换该group元素，在这种情况下，对于文本属性，y将为0，并且，如果提供x，y将位于该组元素的相对位置。

var textwrapper = svg.append("svg:g")
 .attr("class", "mytext")
 .attr("transform", "translate(" + [x,y] + ")");

 textwrapper.append("text")
    .attr("x", 0)             
    .attr("y", 0)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .text("any text );   

与第一个选项相比，这里的优势是您可以根据您的需求更新和动画组元素(我们也可以使用文本，但这种方法更平滑，不影响文本元素属性)，例如鼠标悬停或信息框。