个人中心
gpt4 book ai didi

现有
和层次结构上的D3.js .append()

转载 作者：行者123 更新时间：2023-12-01 22:28:41 25 4
gpt4 key购买 nike

根据我的代码，看起来key_square和key_line分区应该是key_row的同级元素，因为我将它们 append 到分区“key”上，但是它们是key_row的后代。

有人可以向我解释吗？

谢谢，

<body>

    <div id="timeseries"> 
    </div>

    <div id="key"> 
    </div>

    <script>
       var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

//add square
            key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

//d3.select("#key")
        key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

最佳答案

让我们一一讨论代码，
第一

var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

在上面的代码中，我们使用id选择了div，在此处添加div的次数是根据数据的长度创建的，然后我们为这些div指定了类和id，执行这些代码d3后将返回一个包含这些div的数组，因此现在变量键保存这些新创建的div。如果您想看到上面的代码，请写一个console.log(key)stmt。

第二 
key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

在这里，我们将div append 到键上，这意味着此 append 函数在一个由KEY保持的div上调用，因此在执行此代码后，div会在内部创建为上面创建的div的后代。

第三 
key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

在这里，同样的事情我们再次在最初创建的divs上调用append函数，所以同样的事情也会在这里发生。 div作为后代添加到最初创建的div中。

这就是它的工作原理。
我可以这么说。
如果有任何地方犯了错误的话。
谢谢

关于现有<div>和层次结构上的D3.js .append()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24318154/

25 4 0
文章推荐： ios - Xamarin 表单选择器 - iOS 上的 "Done"文本
文章推荐： go - shim.GetStateByPartialCompositeKey迭代器在此代码中如何工作？
文章推荐： ios - 当应用在后台时，iOS 上不显示通知(使用 Firebase 发送)
文章推荐： ios - 在模拟器中测试GameCenter排行榜，您是否需要“提交审查”？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com