Question

对于我的第一个小d3.js项目，我正在使用数据可视化中的“使用数据过滤”配方和d3.js Cookbook（https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter3/data-filter.html处提供）。

我的数据集包含与“动物”，“蔬菜”或“矿物”类型配对的另类词。加载页面时，单词以黑色显示。当用户点击“显示动物”按钮时，动物词语变为红色。同样适用于其他两种类型：单击特定单词类型的按钮会将相应的单词变为红色。所有单词目前都变为红色。

但是，我想要做的是根据类型改变不同的颜色：动物为棕色，蔬菜为绿色，矿物为灰色。我知道我需要在某个地方构建和适应条件框架，但细节正在躲避我。我想这个练习在简单的Javascript中很容易，但我正在努力学习d3！

有人可以帮忙吗？

相关的CSS：

    .word {
        color: black;
        font-size: 2em;
        line-height: 30%;
        }

    .word .animal {
        color: brown;
        }

    .word.vegetable {
        color: green;
        }

    .word .mineral {
        color: lightslategray;
        }

    .selected {
        color: red;
        }

整个脚本（它很短）：

    var dataset = [
        {name: "aegirine", type: "mineral"},
        {name: "burdock", type: "vegetable"},
        ...
        {name: "yantok", type: "vegetable"},
        {name: "zingel", type: "animal"}
        ];


function render(dataset, type) {

    d3.select("body")
        .select("div")
        .attr("id", "worddiv")
        .selectAll("p.word")
        .data(dataset)
        .enter()
        .append("p")
        .attr("class", "word")
        .text(function(d) {
        return d.name;
        }); 

    d3.select("body")
        .selectAll("p")
        .filter(function (d,i) {

        return d.type == type;
        })

        .classed("selected", true);

    } // end function render


render(dataset);


function select(type) {
     render(dataset, type);
} // end function select


function clearAll() {
    d3.select("body")
        .selectAll("p")
        .attr("class", "word");
        }

唯一相关的HTML位于按钮div中：

<button onclick = "select('animal')">
show animals
</button>

<button onclick = "select('vegetable')">
show vegetables
</button>

<button onclick = "select('mineral')">
show minerals
</button>

<button onclick = "clearAll()">
clear
</button>

Answer 1

您可以使用d3.selection.classed方法根据type属性为每个项添加一个类：

function render(dataset, type) {

    d3.select("body")
        .select("div")
        // ... more code
        .text(function(d) { return d.name; }); 

    // Adds a class to each element based on its type
    d3.select('body').selectAll('p.word')
       .each(function(d) { d3.select(this).classed(d.type, true); });

    d3.select("body")
        // ... more code
        .classed("selected", true);

} // end function render

此致

Answer 2

将所有条目的类别设置为“word”时，您也可以设置类型类：

       .attr("class", function (d) {
           return d.type + " word"
       })

你的css应该只在这些项目也有选定的类时为它们着色：

.word.animal.selected {
    color: brown;
}

对于奖励积分，在过滤之前，如果从所有内容中删除“已选择”类，则无需使用清除按钮。只需在过滤器前添加.classed("selected", false)即可。

请参阅此JSfiddle以获取参考：http://jsfiddle.net/vzmt8ec0/

如何使用d3.js过滤器为元素分配不同的css类？

2 个答案: