情节.js:使用重新样式更新每个节点的文本



是否可以使用重新样式功能更新树状图内的文本? 我知道可以通过"反应"函数实现,但这个函数会重绘整个图表(我不希望这种情况发生(。 到目前为止,我拥有的:https://codepen.io/elv1s42/pen/yLydprX

var labels = ["P1", "P2", "P3", "P4"]; 
var parents = ["", "P1", "P1", "P2"];
var data = [{
type: "treemap",
labels: labels,
parents: parents,
marker: { colors: ['green', 'blue', 'red', 'yellow']},
text: ['text1', 'text2', 'text3<br>text3', 'text4'],
textinfo: "label text"
}];
var layout = {};
Plotly.newPlot('myDiv', data, layout)
function changeText(){
var upd = { 
marker: {colors: ['white', 'orange', 'green', 'red']},
//text: ['t1', 't2', 't3', 't4'] // how to update the text?
};
Plotly.restyle('myDiv', upd);
}
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<button onclick='changeText()'>Change my plot!</button>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

我不喜欢回答我自己的问题,但这个问题已经通过 GitHub 的 https://github.com/etpinard 解决了:https://github.com/plotly/plotly.js/issues/4535

因此,工作的解决方案是对text字段使用嵌套数组:

function changeText(){
var upd = { 
marker: {colors: ['white', 'orange', 'green', 'red']},
text: [['t1', 't2', 't3', 't4']] // how to update the text?
};
Plotly.restyle('myDiv', upd);
}

问题中的 CodePen 示例现已修复。

最新更新