Question

我正在使用d3.js来处理涉及交互式地图的项目。

为了测试，我只想激活一个改变路径选择的填充值的函数（这些代表房间轮廓）。

路径已经在画布上绘制。

路径ID值来自另一个系统。

我有JSON数据，我希望用它来加入路径以更新其填充颜色。连接基于一个基于路径的.attr（“id”）的键值，它将与传入的json数据上的相同键值相等。

当我使用文件中本地的简单测试数组来触发我的函数时，它按预期工作并更新4或5个路径的测试组的填充颜色。

但是，当我尝试使用我的JSON数据时，我无法获得更新的路径。

有效的测试数组只是字符串：

  var handleColorLink = [
    ["125E0", "red"],
    ["BC5AC", "orange"],
    ["BC417", "red"],
    ["B13D9", "orange"] 
    ];

JSON数据如下所示：

    [{"handle":"BC5AD","mycolor":"blue"},  
  {"handle":"125F6","mycolor":"blue"},  
  {"handle":"171A7","mycolor":"blue"},
{"handle":"17235","mycolor":"blue"},
{"handle":"17236","mycolor":"blue"}]

我的预感是在JSON侧键（句柄）上找不到匹配项。

代码：

function TestFunction() { 

d3.json("http://myjsonURL", function(data) {
	
	d3.selectAll("path")
        .datum(function(d) { return [d3.select(this).attr("id")]; })
		.data(data, function(d) { return d.handle; }) //doesnt work
		.style("fill", function(d) { return d.mycolor; }); //doesnt work
		//.data(handleColorLink, function(d) { return d[0]; }) //works on string array
		//.style("fill", function(d) { return d[1]; });          //works

});
}//end testfunction

非常感谢任何帮助。

Answer 1

A＆＃39;在盒子外思考＆＃39;解决方案可能是，因为您知道测试数组与您的方法一起工作，只需将JSON数据转换为与测试数组相同的结构。像这样：

data = data.map(function(item) { return [item.handle, item.mycolor]; });

然后就像你在d3.js代码中那样使用它。

只是一个想法;）

d3.js - 更新路径的填充颜色使用字符串数组，但不使用json数据

1 个答案: