選定的元素不會在d3中更改

此片段是Reingold-Tilford樹示例http://bl.ocks.org/4063550的稍微修改版本。一切都是相似的，只是我稍微改變了將文本附加到節點的代碼。我想爲每個節點文本添加一個id，這樣我稍後可以稍微調整文本，使圖形更具可讀性。選定的元素不會在d3中更改

在這裏，我添加了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; }); 
});

在上面的示例代碼是唯一的變化之後，我想把下面這行代碼放到同一個腳本中。

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

當我加載頁面時，它不會改變節點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>

來源

2013-01-18 Anti

你能告訴我們完整的代碼嗎？你到底在哪裏打電話來改變文字？在任何機會繪製主圖的'd3.json'塊之外？ –

有完整的代碼！我正在嘗試更改d3.json調用之外的文本。我沒有經歷過（顯然！），我的想法是先創建圖表，然後修改文本。 – Anti

也許一旦我知道問題是什麼，我可以改變帖子的標題，使其不那麼通用，對其他人更有用。 – Anti

問題是d3.json進行異步調用。即，中的代碼該塊只在網絡調用返回JSON數據時才執行。代碼之後立即執行該塊。所以，你正試圖修改一個還不存在的元素。

解決方法是移動修改d3.json塊內部圖形的代碼，或移動到該塊內部調用的函數中。

來源

2013-01-18 18:26:05

好的，謝謝！是的，當我意識到最後一行在Firebug控制檯上工作正常時，我開始認爲圖表還沒有準備好。雖然我是一個全面的noob，並不知道如何正確表達，就像你剛剛做的那樣。謝謝！ – Anti

選定的元素不會在d3中更改

回答

相關問題