D3.js 选择输入不添加新元素_D3.js

D3.js 选择输入不添加新元素

d3.js

D3.js 选择输入不添加新元素,d3.js,D3.js,我不明白为什么没有添加新元素我已经创建了3个元素，在我的地图中还有2个应该添加，但没有添加任何内容 <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

我不明白为什么没有添加新元素

我已经创建了3个

元素，在我的地图中还有2个

应该添加，但没有添加任何内容

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <ul id="#example">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>    
            // Lets say our data is of this form
            var multiples = [{'num': 2}, {'num': 4}, {'num': 6}, {'num': 8}, {'num': 10}];

            // Get hold of your container
            var container = d3.select('#example');

            // Get hold of all the existing list items within the container
            var children = container.selectAll('li').data(multiples, function (d) {
                console.log(d);
                return d ? d.num : null;
            });

            console.log(children);

            // Mappings that represent pseudo DOM nodes that can potentially
            // be created for each data unit
            var updateSelection = children.enter() // Mappings that need DOM node creation
                    .append('li') // Create the DOM nodes for those mappings
                    .text(function (d) {
                        return d.num;
                    });

            console.log(updateSelection);

            // mapping representing real DOM nodes that could not be
            // mapped to any item in the data
            var exitSelection = children.exit().remove();
        </script>
    </body>
</html>


提供头衔
TODO写入内容





//假设我们的数据是这种形式的
var multiples=[{'num'：2}，{'num'：4}，{'num'：6}，{'num'：8}，{'num'：10}]；
//抓住你的集装箱
var container=d3.select（“#示例”）；
//获取容器中所有现有的列表项
var children=container.selectAll（'li'）。数据（倍数，函数（d）{
控制台日志（d）；
返回d？d.num：空；
});
console.log（儿童）；
//表示伪DOM节点的映射，这些节点可能
//为每个数据单元创建
var updateSelection=children.enter（）//需要创建DOM节点的映射
.append（'li'）//为这些映射创建DOM节点
.文本（功能（d）{
返回d.num；
});
console.log（updateSelection）；
//表示无法访问的真实DOM节点的映射
//映射到数据中的任何项
var exitSelection=children.exit（）.remove（）；

问题在于id，它不应该是

#示例

：

    <ul id="#example"> //#example this is wrong it should be just example.
        <li></li>
        <li></li>
        <li></li>
    </ul>

/#示例这是错误的，应该只是示例。

应该是：

<ul id="example">
    <li></li>
    <li></li>
    <li></li>
</ul>

工作代码

问题在于id，它不应该是

#示例

：

    <ul id="#example"> //#example this is wrong it should be just example.
        <li></li>
        <li></li>
        <li></li>
    </ul>

/#示例这是错误的，应该只是示例。

应该是：

<ul id="example">
    <li></li>
    <li></li>
    <li></li>
</ul>

工作代码