Question

我是Java Script d3库的新手，并尝试使用D3 JS创建图形我想在（x，y）的特定坐标处显示文本但它显示在左上角，而不是根据我想要的位置

请任何人都可以帮我解决如何在x，y的特定坐标上显示文字。

代码显示左上角的文字（不是根据x，y轴显示）但我想要（2,5）坐标

我们怎样才能找到每个路径曲线中间点的[x，y]坐标，我可以在其中显示任何文本。见Path curve

这是我正在运行的代码jsfiddle

`

 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 );

或者你可以添加一个组元素并在svg所覆盖的任何点上转换该组元素，那个情况你x，y对于文本属性将是0 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 );

这里优于第一个选项是你可以根据你的要求更新和动画组元素（我们也可以用文本做，但这种方式更平滑，不影响文本元素属性）基于鼠标悬停等事件或信息框

如何在Javascript D3中以（x，y）的固定坐标显示文本

2 个答案: