Question

我想创建简单的形状绘图。当我点击形状时，它应该创建一个新形状。例如，如果我点击三角形的顶部，我希望新的一个显示在当前的顶部，如果我点击右侧，新的一个出现在右侧等。我是d3js的新手所以我正在努力如何获取我点击的折线数据？现在，我设法创建了一个应该为我做的功能，如果我手动设置折线的新坐标就可以。它创建了形状但我无法获取数据来操纵它以便绘制另一个。此外，如果有人建议我如何管理不同的绘图（当点击顶部，在顶部绘制等...）时会很好。

    <!DOCTYPE HTML>
<html>
    <head>
    <script src="http://d3js.org/d3.v3.js"></script>
    </head>
    <h1>Hello world</h1>
    <body>

    <svg width="1000" height="667"></svg>

    <script>
    scaleX = d3.scale.linear()
      .domain([-10,10])
      .range([75,125]),

    scaleY = d3.scale.linear()
      .domain([-10,10])
      .range([187.5,125]);

    var o = [];
    poly = [{"x":30, "y":15},
        {"x":40,"y":35},
        {"x":50,"y":15}];

    poly2 = [{"x":50, "y":15},
        {"x":60,"y":35},
        {"x":70,"y":15}];

    poly3 = [{"x":60, "y":35},
        {"x":70,"y":15},
        {"x":90,"y":35}];


    var tab = [];
    cir = [{"x": 50,"y":15,"r": 5}];

    o.push(poly);
    o.push(poly2);
    tab.push(cir);

    function draw()
    {
        var cords = [0, 0]
        d3.select("svg")
            .selectAll("polyline")
            .data(o)
            .enter().append("polyline")
            .attr("points",function(d) { 
                return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
            .attr("stroke","black")
            .on("mouseover", function(d) { d3.select(this).style("fill", "red") })
            .on("mouseout", function(d) { d3.select(this).style("fill", "black") })
            .on("click", function(d)
            {
                appendTriangle(d);}
            )
            .attr("stroke-width",2);

    }
    function appendTriangle(triangle)
    {


        var newTriangle = [{x:triangle.x,y:triangle.y},
        {x:triangle.x,y:triangle.y},
        {x:triangle.x,y:triangle.y}];


        o.push(newTriangle);
        draw();
    }
    function appendTriangle2()
    {
        var newTriangle = [{"x":60, "y":35},
        {"x":70,"y":15},
        {"x":90,"y":35},];

        o.push(newTriangle);
        draw();
    }

    draw();
    </script>

Answer 1

您的基准（d在triangle函数中称为appendTriangle）是一个数组对象，而不是对象。

因此，您应该使用索引，如下所示：

var newTriangle = [{
    x: triangle[0].x,
    y: triangle[0].y
}, {
    x: triangle[1].x,
    y: triangle[1].y
}, {
    x: triangle[2].x,
    y: triangle[2].y
}];

当然，您可以通过编程方式执行此操作：

var newTriangle = [];
triangle.forEach(function(d) {
    newTriangle.push({
        x: d.x,
        y: d.y
    })
});

这是一个显示它的演示（我将多边形移动了20个像素，因此新的多边形不会超过前一个）：

scaleX = d3.scale.linear()
  .domain([-10, 10])
  .range([75, 125]),

  scaleY = d3.scale.linear()
  .domain([-10, 10])
  .range([187.5, 125]);

var o = [];
poly = [{
  "x": 30,
  "y": 15
}, {
  "x": 40,
  "y": 35
}, {
  "x": 50,
  "y": 15
}];

poly2 = [{
  "x": 50,
  "y": 15
}, {
  "x": 60,
  "y": 35
}, {
  "x": 70,
  "y": 15
}];

poly3 = [{
  "x": 60,
  "y": 35
}, {
  "x": 70,
  "y": 15
}, {
  "x": 90,
  "y": 35
}];


var tab = [];
cir = [{
  "x": 50,
  "y": 15,
  "r": 5
}];

o.push(poly);
o.push(poly2);
tab.push(cir);

function draw() {
  var cords = [0, 0]
  d3.select("svg")
    .selectAll("polyline")
    .data(o)
    .enter().append("polyline")
    .attr("points", function(d) {
      return d.map(function(d) {
        return [scaleX(d.x), scaleY(d.y)].join(",");
      }).join(" ");
    })
    .attr("stroke", "black")
    .on("mouseover", function(d) {
      d3.select(this).style("fill", "red")
    })
    .on("mouseout", function(d) {
      d3.select(this).style("fill", "black")
    })
    .on("click", function(d) {
      appendTriangle(d);
    })
    .attr("stroke-width", 2);

}

function appendTriangle(triangle) {

  var newTriangle = [];
  triangle.forEach(function(d) {
    newTriangle.push({
      x: d.x + 20,
      y: d.y - 20
    })
  });

  o.push(newTriangle);
  draw();
}

function appendTriangle2() {
  var newTriangle = [{
    "x": 60,
    "y": 35
  }, {
    "x": 70,
    "y": 15
  }, {
    "x": 90,
    "y": 35
  }, ];

  o.push(newTriangle);
  draw();
}

draw();

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

PS：请记住，我只回答一个你的问题，这是主要问题，“如何从d3js折线获取数据？” 。关于新元素的位置，请询问另一个问题：在StackOverflow上询问同一问题中的多个问题太宽。

如何从d3js折线获取数据？

1 个答案: