gpt4 book ai didi

javascript - d3.create() 返回一个带.node() 的元素,但在浏览器中不显示

转载 作者:行者123 更新时间:2023-12-01 23:34:00 25 4
gpt4 key购买 nike

<分区>

  1. 我试图让 D3.js 使用 d3.create() 生成矩形元素。它不工作/显示。

  2. 首先,我创建了一个 rectangle() 函数,它返回一个元素:

    function rectangle() {

    _el = d3.create("rect")
    .attr("stroke", "black")
    .attr("fill", "black")
    .attr("stroke-width", "10px")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 300)
    .attr("height", 200);

    return _el

    }
  3. 然后我创建了一个 SVG 选择,我在其中附加了一个 rectangle().node() 的实例:


    const SVG_WIDTH = 1000;
    const SVG_HEIGHT = 1000;

    svg = d3.select("body").append("svg")
    .attr("width", SVG_WIDTH)
    .attr("height", SVG_HEIGHT)
    .attr("id", "generated")

    svg.append(
    // () => rectangle().node()
    function () { return rectangle().node() }
    )
  4. 但我的浏览器 (Google Chrome) 中没有视觉输出。

  5. 但是,当我查看 DOM(通过 Chrome 的“元素”选项卡)时,D3 已生成正确的 SVG/矩形代码:

    <svg width="1000" height="1000" id="generated">
    <rect stroke="black" fill="black" stroke-width="10px" x="0" y="0" width="300" height="200" rx="10" ry="10"></rect>
    </svg>
  6. 事实上,如果我复制上面的代码并将其不加修改地放置在我的 HTML 文件中的其他任何位置,我的浏览器中就会出现一个矩形。

  7. 为什么 SVG 对浏览器 DOM 的修改不显示/工作,但它生成的代码是正确的,并且在手动复制/粘贴到 HTML 时会显示?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com