Javascript d3数据可视化中未显示的圆圈标签_Javascript_D3.js_Data Visualization

Javascript d3数据可视化中未显示的圆圈标签

javascript d3.js

Javascript d3数据可视化中未显示的圆圈标签,javascript,d3.js,data-visualization,Javascript,D3.js,Data Visualization,下面我将创建一个类似节点的数据可视化 <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr

下面我将创建一个类似节点的数据可视化

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("span")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>


var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
json（“miserables.json”），函数（错误，图形）{
如果（错误）抛出错误；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“span”）
.text（函数（d）{返回d.id；}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

但是，我想在每个圆圈旁边添加文本，并在其id/名称上添加额外的元素

，但由于某种原因，没有显示任何内容

当我检查每个圆圈时。它显示具有正确id的，但跨度根本没有显示在图形上<代码>示例id

您不是在

元素中追加文本，而是在圆中追加文本，让我们按照您的代码查看变量

节点

包含的内容：

  var node = svg.append("g")    // returns a selection holding a g
    .attr("class", "nodes")     // returns the same g, now with class "nodes"
    .selectAll("circle")        // returns an empty selection as there are no circles yet
    .data(graph.nodes)          // returns the empty selection with bound data
    .enter().append("circle")   // returns a selection of newly entered circles
      .attr("r", 5)             // continues to return the circles
      ...

因此，

node

保存了一组圆圈，因此当使用

node.append（“span”）

时，我们试图将文本添加到圆圈中，但这不起作用。因此，我们需要通过打破您的链接来稍微修改这一点：

var node = svg.append("g")  
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("g");  // returns a selection of newly entered g elements

node.append("circle")   // returns a selection of circles, newly append to each g in node
  .attr("r", 5)
  .attr("fill", function(d) { return color(d.group); })
  .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

现在，由于node包含一组g元素，我们还可以添加文本：

  node.append("text") // returns a selection of text, newly append to each g in node
      .text(function(d) { return d.id; });

这里也有一个变化，我将node.append（“span”）更改为node.append（“text”），我们将svg元素而不是html元素添加到svg。虽然可以附加span标记，但它不会显示，因为它们不是svg元素

最后，与此一样，您需要更新每个勾号中每个

的翻译，而不是

cx

和

cy

属性，因为

不是由cx和cy属性定位的：

node
    .attr("transform",function(d) { return "translate("+[d.x,d.y]+")"; });

这是一个例子

注意，要查看链接，需要设置笔划颜色：

.attr（“笔划”、“黑色”）

在你的行中

@AndrewReid这是一个类似的问题，但我不明白答案。正如你从我上面添加的代码中看到的，我确实有g元素。当我检查每个圆时，id/名称可以看到，但现在却出现了。@AndrewReid是的，很抱歉我重新编辑了标题和内容，以便更好地描述这个问题。没问题，gl广告帮助