Javascript 所选元素赢得'；d3无变化_Javascript_Svg_Charts_D3.js

Javascript 所选元素赢得'；d3无变化

javascript svg charts d3.js

Javascript 所选元素赢得'；d3无变化,javascript,svg,charts,d3.js,Javascript,Svg,Charts,D3.js,这段代码是对Reingold Tilford树示例的稍加修改的版本。一切都是相似的，只是我稍微修改了将文本附加到节点的代码。我想给每个节点文本附加一个id，以便以后可以稍微调整文本，使图形更具可读性在这里，我添加了id，并稍微调整了整个图表的旋转。我的更改附在**中 node.append("text") .attr("dy", ".31em") **.attr("id", function(d,i) {return "n" + i;})** .attr("text-anchor"

这段代码是对Reingold Tilford树示例的稍加修改的版本。一切都是相似的，只是我稍微修改了将文本附加到节点的代码。我想给每个节点文本附加一个id，以便以后可以稍微调整文本，使图形更具可读性

在这里，我添加了id，并稍微调整了整个图表的旋转。我的更改附在**中

node.append("text")
  .attr("dy", ".31em")
  **.attr("id", function(d,i) {return "n" + i;})**
  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .attr("transform", function(d) { return d.x < 180 ? "**rotate(10)**translate(8)" :"**rotate(199)**translate(-8)"; })
  .text(function(d) { return d.name; });
});

当我加载页面时，它不会更改节点id=“n1”处的文本！如果我使用Firebug将完全相同的行放入控制台，它会根据需要更改n1节点的文本

在浏览了无数的教程和类似的内容之后，我想我不太明白这些东西是如何工作的，任何建议都将不胜感激

编辑：这里是完整的html文件要求！这是我上面链接的示例，唯一的例外是我上面描述的

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("thesis.json", function(error, root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", diagonal);

  var node = svg.selectAll(".node")
  .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dy", ".25em")
      .attr("id", function(d,i) {return "n" + i;})
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "rotate(10)translate(8)" : "rotate(199)translate(-8)"; })
      .text(function(d) { return d.name; });
});

d3.select(self.frameElement).style("height", diameter  + "px");

d3.select("#n1").text("test");

</script>

</body>
</html>


.节点圆{
填充：#fff；
笔画：钢蓝；
笔划宽度：1.5px；
}
.节点{
字体：12px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
var直径=960；
var tree=d3.layout.tree（）
.尺寸（[360，直径/2-120]）
.separation（函数（a，b）{return（a.parent==b.parent？1:2）/a.depth；}）；
var diagonal=d3.svg.diagonal.radial（）
.投影（函数（d）{return[d.y，d.x/180*Math.PI]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“转换”、“平移”（“+diameter/2+”，“+diameter/2+”））；
d3.json（“thesis.json”，函数（错误，根）{
变量节点=树节点（根），
链接=树。链接（节点）；
var link=svg.selectAll（“.link”）
.数据（链接）
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，对角线）；
var node=svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return”旋转（“+（d.x-90）+”）平移（“+d.y+”）”）；}）；
node.append（“圆”）
.attr（“r”，4.5）；
node.append（“文本”）
.attr（“dy”，“.25em”）
.attr（“id”，函数（d，i）{return“n”+i；}）
.attr（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.attr（“transform”，函数（d）{返回d.x<180？“rotate（10）translate（8）”：“rotate（199）translate（-8）”；}）
.text（函数（d）{返回d.name；}）；
});
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；
d3.选择（“n1”）。文本（“测试”）；
问题在于d3.json
进行异步调用。也就是说，只有当网络调用返回JSON数据时，才会执行该块中的代码。但块后的代码会立即执行。因此，您正在尝试修改一个尚不存在的元素
解决方案是将修改图的代码移到d3.json
块中，或者移到该块中调用的函数中。
您能给我们展示完整的代码吗？你到底在哪里打电话来更改文本？在绘制主图形的d3.json块之外？有完整的代码！我正在尝试更改d3.json调用之外的文本。我在这方面没有经验（很明显！），我的想法是先创建图表，然后修改文本。也许一旦我了解了问题所在，我可以更改文章的标题，使其不那么通用，对其他人更有用。只是要清楚，图表确实加载正确，文本元素的id标记正确，我不能用最后一行来修改文本元素。好的，谢谢！是的，当我意识到最后一行在Firebug控制台上运行良好时，我开始想，不知何故，图表还没有准备好。虽然我是一个彻头彻尾的傻瓜，不知道如何像你刚才那样正确地表达。谢谢
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("thesis.json", function(error, root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", diagonal);

  var node = svg.selectAll(".node")
  .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dy", ".25em")
      .attr("id", function(d,i) {return "n" + i;})
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "rotate(10)translate(8)" : "rotate(199)translate(-8)"; })
      .text(function(d) { return d.name; });
});

d3.select(self.frameElement).style("height", diameter  + "px");

d3.select("#n1").text("test");

</script>

</body>
</html>