Question

我对D3比较新，对数据绑定有疑问。我已经使用了angular.js，所以我习惯了双向数据绑定......但我想知道它是如何在D3上完成的。

我正在尝试将json数据的不同元素添加到不同的div中。

所以在这个例子中：成员名称是名称，类型中的类型，类别中的类别。

将来要向网格添加点击事件，因此当您点击成员名称时，它会显示更多信息。

我知道角度你可以使用ng-repeat和插值数据。但不确定如何在d3中实现这一目标。

任何帮助都会很酷:-)

（下面的代码不起作用。我猜你不能标记多个变量）

    <div id="container" class="AM-grid">

            <div class="AM-cell AM-cell-3">
                    <h2 id="names" class="AM-members-text names"></h2>
            </div>
            <div class="AM-cell AM-cell-2">
                    <h2 id="type" class="AM-members-text type"></h2>
            </div>
            <div class="AM-cell AM-cell-3">
                    <h2 id="category" class="AM-members-text category"></h2>
            </div>
    </div>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

var boxtext = document.getElementById('textarea');
var jsonbox = JSON.parse(boxtext.innerHTML);


var dataElms = d3.select('#container')
        .data(jsonbox)

var na = dataElms.select("#names")
        na.data(jsonbox.member).enter().append('h2')
            .text(function(d){
                return d.display
            });
    </script>

Answer 1

想出来......正在考虑错误的方式

应该重复元素然后附加样式

var dataElms = d3.select('#container').selectAll('.repeat');
var repeat = dataElms.selectAll('div')
    .data(jsonbox.member)
    .enter()
    .append('div')
    .classed('AM-grid members', true)
    .on('click', function(d,i) {
        var activeClass = "active";
    var alreadyIsActive = d3.select(this).classed(activeClass);
        d3.select(this).classed(activeClass, !alreadyIsActive);
        })
    .html(function(d) {
        return "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.display + "</h2></div>" +
                     "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.member_type + "</h2></div>" +
                     "<div class='AM-cell AM-cell-3'>" + "<h2 class='AM-members-subheader'>" + d.category + "</h2></div>" +
                     "<div class='AM-cell AM-cell-2'>" + "<h2 class='AM-members-subheader'>" + d.hash + "</h2></div>"
    });

D3添加到多个div（数据绑定JSON）

1 个答案: