Question

我在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("");}
},

我需要在contact_info内呈现信息，现在我正在尝试contact_info.phone，但我没有得到。

这是图表：http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07

这是完整的代码

$(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"}
            }
          ]
        }
      }]
  });
});

看一下注释：//其他2条线路工作，但这一条线路不是!!!

因为这是不起作用的行

Answer 1

您可以通过一些覆盖来实现此目的。

<强> CHANGE1：

当您有嵌套数据时，将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;}
      }
    },

<强> Change2

而不是这个脚本

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

编写一个函数来获取textField，如下所示：

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

在我的插件中检查lines.js我已经骑过的东西。

工作小提琴here

请注意两个脚本：

<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>

根据您的要求，您应该被覆盖......这就是我所做的。

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

1 个答案: