javascript - 弹出表单来编辑形状位置和标签？

Question

我想点击一个形状来编辑它的文本标签和 x,y 坐标，使用一个弹出表单，在提交时更新该形状的数据，然后该形状移动到新的 x, y 坐标。我一直无法在网上或普通书籍中找到任何此类示例。

页面上所有形状的数据都存储在一个 JSON 数组中。一些在线示例显示了如何“就地”编辑文本或编辑单个值。这对我不起作用，因为只有标签应该显示在形状上，我想编辑页面上通常不可见的多个形状参数。

如果可能的话，我想将解决方案保留为 D3 或基本 JavaScript。

此处显示了一个显示三个可点击矩形的简单示例: https://jsfiddle.net/NovasTaylor/oyL0hj3d/

当前的 “click” 事件将标签、x 和 y 值写入控制台。此事件应触发可编辑表单的显示。

rects.append("rect")
  .attr("x",     function (d)  { return d.x; })
  .attr("y",     function (d)  { return d.y; })
  .attr("height", function (d) { return d.height; })
  .attr("width",  function (d) { return d.width; })
  .style("fill",  function(d)  { return d.color; })
  .on("click", function(d){
    console.log("You clicked rectangle: " + d.label)
    console.log ("X position: " + d.x)
    console.log ("Y position: " + d.y)
  });

非常感谢所有建议和工作示例!

Answer 1

在 D3 中覆盖数据非常简单。在 d 是第一个参数的监听器中，只需执行以下操作:

d.foo = bar;

在您的示例中，让我们使用 prompt 获取新值。这只是一个向您展示如何操作的演示:您可以轻松更改花哨的弹出式 div 的丑陋提示。

因此，在监听器内部，我们获得了新值...

var newLabel = prompt("Please enter the new label: ");
var newX = prompt("Please enter the new x position: ");
var newY = prompt("Please enter the new y position: ");

...并使用它们重新定位矩形，同时覆盖基准:

d3.select(this)
    .attr("x", d.x = +newX)
    .attr("y", d.y = +newY);

唯一的问题是获取标签。因为你必须在 DOM 中上下移动，我建议你给他们(唯一的)ids...

rects.append("text")
    .attr("id", function(d, i) {
        return "label" + i;
    })

...他们得到它们:

d3.select(this.parentNode)
    .select("#label" + i)
    .text(newLabel)
    .attr("x", function(d) {
        return d.x + 10;
    })
    .attr("y", function(d) {
        return d.y + 10;
    });

以下是您的代码，仅进行了这些更改:

var rectData = [{
  "label": "one",
  "x": 100,
  "y": 50,
  "height": 100,
  "width": 120,
  "color": "green"
}, {
  "label": "two",
  "x": 250,
  "y": 50,
  "height": 100,
  "width": 120,
  "color": "purple"
}, {
  "label": "three",
  "x": 400,
  "y": 50,
  "height": 100,
  "width": 120,
  "color": "red"
}];

var svg = d3.select("body").append("svg")
  .attr("width", 600)
  .attr("height", 200);

var rects = svg.selectAll("rect")
  .data(rectData)
  .enter();

rects.append("rect")
  .attr("x", function(d) {
    return d.x;
  })
  .attr("y", function(d) {
    return d.y;
  })
  .attr("height", function(d) {
    return d.height;
  })
  .attr("width", function(d) {
    return d.width;
  })
  .style("fill", function(d) {
    return d.color;
  })
  .on('mouseover', function(d) {
    var rectSelection = d3.select(this)
      .style({
        opacity: '0.5'
      })
  })
  .on('mouseout', function(d) {
    var rectSelection = d3.select(this)
      .style({
        opacity: '1'
      })
  })
  .on("click", function(d, i) {
    var newLabel = prompt("Please enter the new label: ")
    var newX = prompt("Please enter the new x position: ")
    var newY = prompt("Please enter the new y position: ")
    d3.select(this).attr("x", d.x = +newX).attr("y", d.y = +newY);
    d3.select(this.parentNode).select("#label" + i).text(newLabel).attr("x", function(d) {
        return d.x + 10;
      })
      .attr("y", function(d) {
        return d.y + 10;
      })
  });

// Rectangle Label
rects.append("text")
  .attr("id", function(d, i) {
    return "label" + i;
  })
  .style("fill", "black")
  .attr("dy", ".35em")
  .attr("x", function(d) {
    return d.x + 10;
  })
  .attr("y", function(d) {
    return d.y + 10;
  })
  .text(function(d) {
    return "Label: " + d.label
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

请记住，这是一个非常非常简单的演示:我既不检查输入的类型(字符串、整数、 float ...)，也不检查它们的值。

PS:如果您使用的是 D3 v4(对于您的代码，根本不需要无需更改!)，您可以通过一个简单的 selection.raise().