Javascript 如何在D3中渲染对象数据？

这个物体在D3里

data: {
  items: [
    {
      name: "my name",
      position: "lead",
      contact_info: {
        phone: "54665",
      },
    },
    {
      name: "my other name",
      position: "IDK",
      contact_info: {
        phone: "32435",
      },
    },
  ],
  eval: function (item) {console.log(item); return item.contact_info.phone;},
  myFn: function (item) {console.log('item'); return item.contact_info.phone;},
  classed: function (item) {return item.name.split(" ").join("");}
},

我需要呈现

联系人信息

中的信息，因为现在我正在尝试使用

联系人信息.电话

，但我没有得到

这是图表：

这是完整的代码

$(document).ready(function () {
  var bubbleChart = new d3.svg.BubbleChart({
    supportResponsive: true,
    size: 600,
    innerRadius: 600 / 3.5,
    radiusMin: 50,
    data: {
      items: [
        {
          name: "my name",
          position: "Lead",
          contact_info: {
            phone: "32435",
          },
        },
        {
          name: "my other name",
          position: "IDK",
          contact_info: {
            phone: "657657",
          },
        },
      ],
      eval: function (item) {console.log(item); return item.contact_info.phone;},
      myFn: function (item) {console.log('item'); return item.contact_info.phone;},
      classed: function (item) {return item.name.split(" ").join("");}
    },
    plugins: [
      {
        name: "central-click",
        options: {
          text: "(See more detail)",
          style: {
            "font-size": "12px",
            "font-style": "italic",
            "font-family": "Source Sans Pro, sans-serif",
            //"font-weight": "700",
            "text-anchor": "middle",
            "fill": "white"
          },
          attr: {dy: "65px"},
          centralClick: function() {
            alert("Here is more details!!");
          }
        }
      },
      {
        name: "lines",
        options: {
          format: [
            {// Line #0
              textField: "position",
              classed: {position: true},
              style: {
                "font-size": "28px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "0px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            },
            {// Line #1 // THE OTHER 2 LINES WORKS, BUT THIS ONE IS NOT!!!
              textField: "contact_info.phone",
              classed: {contact_info : {phone: true}},
              style: {
                "font-size": "22px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "20px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            },
            {// Line #2
              textField: "name",
              classed: {name: true},
              style: {
                "font-size": "14px",
                "font-family": "Source Sans Pro, sans-serif",
                "text-anchor": "middle",
                fill: "white"
              },
              attr: {
                dy: "20px",
                x: function (d) {return d.cx;},
                y: function (d) {return d.cy;}
              }
            }
          ],
          centralFormat: [
            {// Line #0
              style: {"font-size": "50px"},
              attr: {}
            },
            {// Line #1
              style: {"font-size": "30px"},
              attr: {dy: "40px"}
            },
            {// Line #2
              style: {"font-size": "20px"},
              attr: {dy: "40px"}
            }
          ]
        }
      }]
  });
});

请看注释：//其他两行可以工作，但这一行不行

---

因为这是一条不起作用的线路

您可以通过一些覆盖来实现这一点

更改1:

当您将嵌套数据作为函数传递textField时，如下所示：

      {// Line #1 // THE OTHER 2 LINES WORKS, BUT THIS ONE IS NOT!!!
      textField: function(d){return d.contact_info.phone},
      classed: {contact_info : {phone: true}},
      style: {
        "font-size": "14px",
        "font-family": "Source Sans Pro, sans-serif",
        "text-anchor": "middle",
        fill: "red"
      },
      attr: {
        dy: "20px",
        x: function (d) {return d.cx;},
        y: function (d) {return d.cy;}
      }
    },

function getText(d,f){
     if(d.item[f.textField])
        return d.item[f.textField];
      else 
        return f.textField(d.item);
  }

更改2

而不是这个脚本

<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>

在我的plunk中，检查

lines.js

，在那里我克服了一些困难

工作小提琴

请注意，这两个脚本：

<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>

---

是指根据您的要求被您覆盖…这就是我所做的。

该插件似乎无法处理嵌套数据。