Question

对于每个节点，我有一个圆圈，我借助函数ColorType(d)进行着色：

 node.append("circle")
     .attr("r", 20)
     .attr("y", -25)
     .style("fill", function(d) { return ColorType(d); })
     .style("stroke-width",0.5)
     .style("stroke",'black')
     .attr("opacity", "1");

我的ColorType功能

function ColorType(d){
    for (var i = 0; i < TypesTab.length; i++) {
        if (d.type == TypesTab[i].type) { return ColorAction;}
    }   
}

在上面的函数中，d.type是我的节点的类型（参见下面的json文件结构）。 TypesTab[i].type是我的每种类型，分别存储在类型中，检查节点类型是否与类型中类型的值相同，如果然后应用ColorAction为节点圈着色。

这里是ColorAction代码，它嵌入在每个颜色选择器容器中，附加到类型中的每个类型，列表插入#filterColor html dom。所以每种类型都有一个颜色选择器容器，它应该只为自己的颜色着色。

$(document).ready(function () {
    $.getJSON("databeta.json", function (obj) {
        $('#filterColor').data('types', obj.types.map(function (o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function (o) {
            return '<li>' + o.type + '<input class="color-picker" type="text"/></li>';
        }).join(''));

        var data = $('#filterColor').data('types'); //stores all types

        mynodes = obj.nodes;
        console.log("mynodes : ", mynodes); //array of all my nodes
        console.log("mynodes : ", mynodes[3].type); //reading the type of the fourth object in the nodes array

        $("#filterColor .color-picker").each(function(){
            $(this).spectrum({
                color: (function (m, s, c) {
                    return (c ? arguments.callee(m, s, c - 1) : '#') +
                        s[m.floor(m.random() * s.length)]
                })(Math, '0123456789ABCDEF', 5), //generate random initial color for each container
                preferredFormat: "rgb",
                showInput: true,
                showPalette: true,
                showAlpha: true,
                palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]],
                change: function(color) {
                    MyNode = d3.select("#node").selectAll(".entreprise").select("circle");
                    MyNode.style("fill", function(d) {
                        return d3.rgb(color.toHexString())
                    });
                    Coloration = d3.rgb(color.toHexString());
                }
            });
        });

    });
});

问题是当我在ColorType(d)函数中对类型进行硬编码时，

if (d.type == "school") { return ColorAction;}

它仅成功为学校类型的节点着色。但是，如果我想将其设置为动态，以便使用颜色选择器所分配的类型为节点着色，则会失败，因为我无法与each的{{1}}建立连接。因此，问题是将o.type each传递到o.type和/或ColorAction，以便每个容器只为自己类型的节点着色。

这是一次失败的尝试，因为它没有考虑ColorType(d)并从全局变量（o.type中读取类型中的type ）它包含类型中的所有TypesTab：

type

以下是json结构：

function ColorType(d){
    for (var i = 0; i < TypesTab.length; i++) {
        if (d.type == TypesTab[i].type) { return ColorAction;}
    }

}

Answer 1

这是我如何阅读/导入JSON。在for中是基本的，所以你需要改变那个部分以满足你的需要。

D3.js使用spectrum.js使用函数为节点圆着色

1 个答案: