Question

我是D3的新手，我需要一项任务的帮助。当您单击按钮时，只会覆盖文本，但我想删除具有特定ID的组中的所有子项，并使用#refresh的子项填充它。

<?xml version="1.0"?>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <style>
    body {
        background-color: #000000;
    }</style>
    </head>

    <body>
    <button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
    <svg id="refresh">
        <text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
    </svg>
    <svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
        <g>
            <g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
                <text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
            </g>
        </g>
    </svg>
    </body>

</html>

<script src="https://d3js.org/d3.v3.js"> </script>
<script>    
    function refreshSvgElement(id) {

    var refreshElement = d3.select("#refresh");

    var selection = d3.select(id)
        .select("text")
        <!-- .remove() -->
        <!-- .append("text") -->
        .text(refreshElement.text());
    }

</script>

Answer 1

我就是这样做的。将selection存储为var，然后选择所有当前文字并使用.remove()，然后添加新文字。

<?xml version="1.0"?>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <style>
    body {
        background-color: white;
    }</style>
    </head>

    <body>
    <button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
    <svg id="refresh">
        <text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
    </svg>
    <svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
        <g>
            <g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
                <text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
            </g>
        </g>
    </svg>
    </body>

</html>

<script src="https://d3js.org/d3.v3.js"> </script>
<script>    
    function refreshSvgElement(id) {

    var refreshElement = d3.select("#refresh");
    console.log(refreshElement.text())
    var selection = d3.select(id)
        selection.selectAll("text").remove();
        selection.append("text").text(refreshElement.text()).attr("x", "0.5").attr("y", "50");
    }

</script>

D3删除旧子项，然后添加具有自己属性的新子项

1 个答案: