javascript - 如何获取d3.js Treemap布局中元素的对象属性onclick

标签 javascript reactjs d3.js

在任意段的d3treemap布局onClick中,如何在控制台中记录被点击的元素对象属性。

在此链接中找到我的 react 和 d3.js 代码。 https://codesandbox.io/s/affectionate-thunder-l024x

const dataObj = {
  name: "Home",
  children: [
    {
      name: "A",
      metricsValue: "ma",
      value: "15"
    },
    {
      name: "BCD",
      value: "35",
      metricsValue: "m1"
    }
  ]
};

示例:单击元素“BCD”,在控制台中记录 BCD 的属性。

Result : 
{
      name: "BCD",
      value: "35",
      metricsValue: "m1"
    }

最佳答案

你需要在 logTitle 方法中传递 Object 并且还需要对索引文件进行一些更改

function logTitle(d) {          
      self.props.onClickSegment({
        name: d.name,
        value: d.value,
        metricsValue: d.metricsValue
      });
    }

我已经对您的示例进行了更改,在下面找到它

https://codesandbox.io/s/rough-star-9vm5m

关于javascript - 如何获取d3.js Treemap布局中元素的对象属性onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58056570/

相关文章:

javascript - 尝试验证 HTML 中的函数

javascript - 正则表达式替换某些字符,但不适用于javascript中的特定设置

reactjs - 如何将 kotlin-react html 提取到方法中

reactjs - VSCode 不会在 typescript 中导入 <Text> 组件

javascript - 商店中的 Flux ajax api 调用返回父函数

javascript - 使用 Jquery 删除选择器 CSS

javascript - 无法获取表单面板的 x 和 y 坐标并在加载时从 cookie 中设置它们

javascript - 如何将分层 csv(分号分隔)转换为多维数组

javascript - 叠加层未显示在数据生成的 d3 形状之上

JavaScript 或 D3js 表示法