Question

鉴于以下json结构：

{
    "nodes": [
        {
        "type": "school",
        "country": "US",
        "name": "saint peter's",
        "id": 1006
        },
        {
        "type": "univeristy",
        "country": "Brazil",
        "name": "saint joseph's",
        "id": 1007
        }        
        ...
    ],
    "links": [
            {
            "source": 1006,
            "target": 1007,
            "value": 20            
        },

    ],
    "types": [
                {
                    "type": "school",
                    "image": "image01"
                },
                {
                    "type": "univeristy",
                    "image": "image02"
                },
                {
                    "type": "company",
                    "image": "image03"
                },
            ]   
}

我从types.type获取节点类型列表并将其附加到html标记;为每个列表项指定颜色。当我更改颜色选择器容器中的颜色时，在任何列表项中，它只会更改.school的颜色，因为它在此处是MyNode = d3.select("#node").selectAll(".school").select("circle");的硬编码如何更改它以匹配列表项中的type与nodes.type中找到的节点类型？

$(document).ready(function () {
    $.getJSON("data.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(''));

        $("#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),
                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(".school").select("circle");
                    MyNode.style("fill", function(d) { return d3.rgb(color.toHexString()) });
                    ColorSchool = d3.rgb(color.toHexString());
                }
            });
        });
    });
});

传递到此函数的

：

function ColorType(d)
{
  if (d.type == "school") { return ColorSchool;}
  if (d.type == "univeristy"){ return Coloruniveristy;}
  if (d.type == "company"){ return Colorcompany;}
}

Answer 1

您可以在自定义属性中将类型引用存储在实际元素中。由于它只需要一个字符串，这可能足以解决您的问题。

创建<li>元素时，您可以使用data-fortype字符串添加属性，例如：o.type。

在初始化each内容的spectrum中，使用this.getAttribute或jQuery等效项提取它。

一个例子，在vanilla js :(我真的不知道jQuery API，对不起）

＆＃13;

var data = {
  "types": [{
    "type": "school",
    "image": "image01"
  }, {
    "type": "univeristy",
    "image": "image02"
  }, {
    "type": "company",
    "image": "image03"
  }]
};

// Make UI from code:
makeUI();

function makeLi(type) {
  return "<li>" +
    type.type +
    // (1) Here, the selector is stored in attr.
    "<input class='test' data-forType='" + 
    type.type +
    "' type='text' /></li>"
};


function onChange(e) {
  // (2) Here, we retreive the attribute
  console.log("Selector: " + e.target.getAttribute("data-forType")); 
};

function makeUI() {
  data.types.forEach(function(type) {
    document.querySelector("ul").innerHTML += makeLi(type);
  });

  Array.from(document.querySelectorAll("li"))
    .forEach(function(el) {
      el.addEventListener("change", onChange);
    });
};

＆＃13;

<ul>

</ul>

＆＃13;

D3.js节点颜色基于类型

1 个答案: