Question

我有一些通过D3与SVG交互的单选按钮......

<ul>
 <li><input type="radio" name="xyz" onclick="updateMap('someProp1')" />Some label</li>
 <li><input type="radio" name="xyz" onclick="updateMap('someProp2')" />Some label</li>
 <li><input type="radio" name="xyz" onclick="updateMap('someProp3')" />Some label</li>
 etc...

我有这样的数据......

var myData = {
{
  "title" : "Some Title",
  "desc" : "Some description",
  "states" : [    {
      "st" : "AK",
      "someProp1" : 0.067,
      "someProp2" : 0.01,
      "someProp3" : 0.468
    },
    {
      "st" : "MI",
      "someProp1" : 0.067,
      "someProp2" : 0.01,
      "someProp3" : 0.468
    },
etc...
}

使用D3，我将myData绑定到一堆SVG路径组（即美国各州的形状），然后将这些组绘制为等值线并构建相应的地图图例。

当有人点击单选按钮时，我需要重新绘制SVG组，更改图例，并更新其他一些内容。通过更简单的可视化，我只使用了一组if / else语句来完成工作。像这样......

function updateMap(whatSelection){
  theSVGshapes.attr({
   'height' : function(d){
     if (whatSelection === 'someProp1') { return h - yScale(d.someProp1); }
     else if (whatSelection === 'someProp2') { return h - yScale(d.someProp2); }
     etc....

但是我对这种蛮力方法有太多选择。我真的需要通过单选按钮无误地使用函数触发传递的值。有点像...

function updateMap(whatSelection){
  theSVGshapes.attr({
   'height' : function(d){ return d.whatSelection; }
   etc.....

当然，这不起作用。控制台告诉我d未定义。在其他问题中，我真的要求它将高度设置为d.omeProp1'。

所以，这是一个很长的问题，我不太清楚如何表达...这可能是我无法在StackExchange上找到答案的原因。

即（最好，我可以命名）：如何将变量设置为等于对象的属性值，以便我可以在D3中的多个重绘命令中使用该变量？

Answer 1

原则上，有两种方法可以访问对象中的属性值。第一种形式是您在代码中使用的内容：

d.attribute

如果属性的名称是静态的，则可以正常工作。如果不是，第二种形式更好：

d["attribute"]

除了可以传递任何（动态生成的）字符串外，它实现了完全相同的功能。所以在你的情况下你需要使用

d[whatSelection]

如何设置我的变量，以便D3数据更新找到正确的对象属性？

1 个答案: