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

【问题标题】：d3.js - updating fill color for path works with string array, but not with json datad3.js - 更新路径的填充颜色适用于字符串数组，但不适用于 json 数据
【发布时间】：2016-11-19 20:26:43
【问题描述】：

我在一个涉及交互式地图的项目中使用 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

任何帮助将不胜感激。

【问题讨论】：

可能是因为你通过return d.handle过滤数据，所以你只能访问句柄而不是整个数据对象
这个.datum(function(d) { return [d3.select(this).attr("id")]; }).data(data, function(d) { return d.handle; }) 是非常奇怪的语法。你希望完成什么？你是如何生成路径的d 属性的？
路径已创建。用于创建路径的数据（d 值、id 值等）来自单独的数据流。我希望加载路径（代表平面图），然后我希望能够更改一些命名路径的填充颜色。我从网上某处获得了基准示例。不幸的是，我不知道 d3 的“奇怪”是什么。

标签： d3.js

【解决方案1】：

“跳出框框思考”解决方案可能是，因为您知道测试数组适用于您的方法，只需将 JSON 数据转换为与测试数组相同的结构。像这样：

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

然后像在 d3.js 代码中一样使用它。

只是一个想法；）

【讨论】：

这成功了！不过，我真的很想知道如何直接访问 JSON 值，而不必在这种情况下使用 map。非常感谢您的意见。