zoukankan      html  css  js  c++  java
  • [D3] Debug D3 v4 with Dev Tools

    Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

    First thing first, you can use chrome dev tool to select one of the d3 element.

    And then to access it in the console, you can use:

    $0
    
    <circle cx=​"196.00000000000003" cy=​"404.25" r=​"24" class=​"ball">​</circle>​

    If you want to see the data, you can do:

    $0.__data__
    
    // Object{x: 40, y: 50, r: 24}

    You can modfiy style or element by doing:

    d3.select($0).style('stroke', 'red');

    Or you want to select multi things:

    d3.selectAll('circle').filter(d => d.r < 30).nodes()

    .nodes() will display all the svg nodes.

    Or do patch modifications:

    d3.selectAll('circle').filter(d => d.r < 30).style('stroke', 'red')

  • 相关阅读:
    jquery index与eq
    尝试一下
    document
    2017-03-28 java script DOM操作
    2017-03-25 CSS 样式
    CSS 样式表分类
    CSS 样式表
    HTML 框架
    表格
    HTML常用标记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7404602.html
Copyright © 2011-2022 走看看