d3.js 和react 结合_react.js, react-dom.js - CSDN
  • D3.js是一个灵活的库,用于在Web浏览器中呈现动画化SVG。 它在DOM中呈现内容的方法与React.js(Dash组件使用的用户界面库)有很大不同。 根据大众的需求,我们创建了一组教程来帮助您使用D3.js制作高质量的Dash...

    官方教程Encapuslating D3.js Charts as Python Dash Components

    D3.js是一个灵活的库,用于在Web浏览器中呈现和动画化SVG。 它在DOM中呈现内容的方法与React.js(Dash组件使用的用户界面库)有很大不同。

    根据大众的需求,我们创建了一组教程来帮助您使用D3.js制作高质量的Dash组件。 除了D3,这些教程还应该帮助您更好地了解如何将第三方库集成到自定义的React和Dash组件中。

    结合Python+d3来创建动态可视化应用:combining-python-and-d3-js-to-create-dynamic-visualization-applications

    sorry guys, 过一段时间再来整理这个。>3

    展开全文
  • react结合d3.js和svg绘制条形统计图

    千次阅读 2018-01-18 17:40:18
    (1.)D3.js中V3V4的版本差别很大,所以一定要注意版本; (2.)引用D3.jsjs库文件的时候,应该通过npm安装库依赖,虽然D3.js不咋出名,但是npm还是可以安装它,安装命令是: npm安装:npm install d3 前端导入:...

    最近学习了下D3和仿照别人的案例写了个小demo,遇到了一些问题,在这里记录下:
    1.遇到的一些坑:
    (1.)D3.js中V3和V4的版本差别很大,所以一定要注意版本;
    (2.)引用D3.js的js库文件的时候,应该通过npm安装库依赖,虽然D3.js不咋出名,但是npm还是可以安装它,安装命令是:
    npm安装:npm install d3
    前端导入:import * as d3 from 'd3';

    (3.)react中css的解析和导入:
    一:如果是通过create-react-app创建的项目,可以直接通过命令:

    import './styles.css';

    导入,可以参考蚂蚁金服的样式导入和操作;
    二:非create-react-app项目,可以参考文章:
    http://echizen.github.io/tech/2017/03-09-css-in-react
    2.demo的源码:
    animSVG.js

    
    import React, { Component } from 'react';
    import * as SimulationData from './svgData';
    import * as d3 from 'd3';
    import './styles.css';
    //需要注意的问题:v3和v4版本差别很大,需要高度注意;
    class AnimSVG extends React.Component {
    
        render() {
            {/* 定义柱状图的颜色数组; */ }
            const colors = ["#39D1DE", "#1CDB62", "#1FE015", "#A7E51F", "#E3E312", "#EA6A1F", "#29A0E3"];
            {/* 画布大小 */ }
            var width = 400;
            var height = 400;
    
            {/* 在 body 里添加一个 SVG 画布 */ }
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
    
            {/* 画布周边的空白 */ }
            var padding = { left: 30, right: 30, top: 20, bottom: 20 };
    
            {/* 定义一个数组 */ }
            var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
    
            {/* x轴的比例尺 */ }
            var xScale = d3.scale.ordinal()
                .domain(d3.range(dataset.length))
                .rangeRoundBands([0, width - padding.left - padding.right]);
    
            {/* y轴的比例尺 */ }
            var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset)])
                .range([height - padding.top - padding.bottom, 0]);
    
            {/* 定义x轴 */ }
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");
    
            {/* 定义y轴 */ }
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
    
            {/* 矩形之间的空白间距的宽度; */ }
            var rectPadding = 4;
    
            //添加矩形元素
            var rects = svg.selectAll(".MyRect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class", "MyRect")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function (d, i) {
                    return xScale(i) + rectPadding / 2;
                })
                .attr("width", xScale.rangeBand() - rectPadding)
                .attr("y", function (d) {
                    var min = yScale.domain()[0];
                    return yScale(min);
                })
                .attr("height", function (d) {
                    return 0;
                })
                .transition()
                .delay(function (d, i) {
                    return i * 200;
                })
                .duration(2000)
                .ease("bounce")
                .style("fill", function (uselsssVO, index) {
                    var currentColorIndex = index % (colors.length);
                    return colors[currentColorIndex];
                })
                .attr("y", function (d) {
                    return yScale(d);
                })
                .attr("height", function (d) {
                    return height - padding.top - padding.bottom - yScale(d);
                });
    
            {/* 添加文字元素 */ }
            var texts = svg.selectAll(".MyText")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "MyText")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function (d, i) {
                    return xScale(i) + rectPadding / 2;
                })
                .attr("dx", function () {
                    return (xScale.rangeBand() - rectPadding) / 2;
                })
                .attr("dy", function (d) {
                    return 20;
                })
                .text(function (d) {
                    return d;
                })
                .attr("y", function (d) {
                    var min = yScale.domain()[0];
                    return yScale(min);
                })
                .transition()
                .delay(function (d, i) {
                    return i * 200;
                })
                .duration(2000)
                .ease("bounce")
                .attr("y", function (d) {
                    return yScale(d);
                });
    
            {/* 添加x轴 */ }
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
                .call(xAxis); 
    
            {/* 添加y轴 */ }
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .call(yAxis);
    
            return (
                <svg xmlns="http://www.w3.org/2000/svg"></svg>
            );
        }
    }
    
    export default AnimSVG;
    

    styles.css

    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
    
    .MyRect {
        fill: steelblue;
    }
    
    .MyText {
        fill: white;
        text-anchor: middle;
    }

    3.demo的效果:
    这里写图片描述

    展开全文
  • 前段时间由于性能要求,需把项目d3的版本从v3升级到v4,据了解d3由于在v4版本之前是没有进行模块化的,所以v3代码的扩展性是比较差的,考虑到长远之计,d3在v4版本算是对代码进行了模块化的重构吧,给开发者提供了...
        

    前段时间由于性能要求,需把项目d3的版本从v3升级到v4,据了解d3由于在v4版本之前是没有进行模块化的,所以v3代码的扩展性是比较差的,考虑到长远之计,d3在v4版本算是对代码进行了模块化的重构吧,给开发者提供了一些可定制化的东西,所有api变化较大,这个坑还需各种研究文档才能填完,好了,下面开始我的表演了。

    初始化force布局

    初始化函数从v3的d3.layout.force()变成v4的d3.forceSimulation(),部分参数设置方式如下:

    this.force = d3.forceSimulation().alphaDecay(0.1) // 设置alpha衰减系数
                    .force("link", d3.forceLink().distance(100)) // distance为连线的距离设置
                    .force('collide', d3.forceCollide().radius(() => 30)) // collide 为节点指定一个radius区域来防止节点重叠。
                    .force("charge", d3.forceManyBody().strength(-400))  // 节点间的作用力

    为布局添加点和线

    this.force.nodes(nodes)   // 节点数据
              .force('link', d3.forceLink(links).distance(150));  // 连线数据 distance为连线的距离设置
              .alpha(1);  // 设置alpha值,让里导向图有初始动力
              .restart();   // 启动仿真计时器

    由于在v4版本中nodes的xy坐标和加速度vxvy只在nodes中计算一次,所有在变成有节点或连线增加的时候,必须重新执行一次force.nodes(nodes)force('link', d3.forceLink(links)),初始化节点的数据结构。如果在v3版本中,只需在布局初始化时执行即可,在d3会在每次force.start()方法执行时重新初始化一次节点和连线的数据结构,这是一个特别需要注意的地方,另外在v4版本中start方法被遗弃,需使用restart方法。

    react部分

    将节点的dom结构交给react来控制,方便在节点上添加事件。以下为svg渲染部分代码。

    render() {
        const { width, height, nodes, links, scale, translate, selecting, grabbing } = this.props.store;
        return (
          <svg id="svg" ref="svg" width={width} height={height}
            className={cn({
              grab: !selecting && !grabbing,
              grabbing: !selecting && grabbing
            })}
            >
            <g id="outg" ref="outg" transform={`translate(${translate})scale(${scale})`}>
              <g ref="lines" className="lines">
                links.map(link => (
                    <line
                      key={`${link.source.uid}_${link.target.uid}`}
                      ref={child => this.links[`${link.source.uid}_${link.target.uid}`] = child}
                      x1={link.source.x}
                      y1={link.source.y}
                      x2={link.target.x}
                      y2={link.target.y}/>
                  ))
              </g>
              <g ref="nodes" className="nodes">
                {
                  nodes.map(node => (
                    <Node key={node.uid}
                      node={node}
                      store={this.props.store}
                      addRef={child => this.nodes[node.uid] = child}/>
                  ))
                }
              </g>
            </g>
          </svg>
        );
      }

    Node.js 节点
    以下为Node Component部分代码

    class Node extends Component {
      render() {
        const { node, addRef, store } = this.props;
        const { force } = store;
        return (
          <g className="node"
            ref={child => {
              this._node = child;
              addRef(child);
            }}
            transform={`translate(${node.x || width / 2},${node.y || height / 2})`}
            >
            <g id={node.nodeIndex}>
              // 节点图片dom
            </g>
            {
              node.locked && (
                <Lock
                  x={10}
                  y={10}
                  release={() => {   // 解锁节点
                    node.fixed = false;
                    node.locked = false;
                    node.fx = null;   // 当节点的fx、fy都为null时,节点处于活动状态
                    node.fy = null;   
                    force.alpha(0.3).restart();  // 释放锁定节点时需设置alpha值并重启计时器,使得布局可以运动。
                  }}
                  />
              )
            }
          </g>
        );
      }
    
      componentDidMount() {
        this._node.__data__ = this.props.node;  // 将node节点在d3内部存一份引用,让每次计时器更新的时候自动更改nodes列表中的数据
        d3.select(this._node)  // 各种事件
          .on('click', d => {
              // code
          })
      }
    }

    Lock.js 节点解除固定按钮。

    class Lock extends Component {
      render() {
        const { x, y, fixed } = this.props;
        return (
          <use
            ref="lock"
            xlinkHref="#lock"
            x={x}
            y={y}
            />
        );
      }
    
      componentDidMount() {
        const { release } = this.props;
        d3.select(this.refs.lock)
          .on('click', () => {
            d3.event.stopPropagation();
            release();
          });
      }
    }

    仿真计时器 tick

    计时器函数,在仿真启动的过程中,计时器的每一帧都会改变一次之前我们在内部存的引用(this._node.__data__ = this.props.node)的node的数据的x值和y值,这时我们需要更新dom结构中的节点和线偏移量。

    force.on('tick', () => {
      nodes.forEach(node => {
        if (!node.lock) {
          d3.select(self.nodes[node.uid]).attr('transform', () => `translate(${node.x},${node.y})`);
        }
      });
      links.forEach(link => {
        d3.select(self.links[`${link.source.uid}_${link.target.uid}`])
          .attr('x1', () => link.source.x)
          .attr('y1', () => link.source.y)
          .attr('x2', () => link.target.x)
          .attr('y2', () => link.target.y);
      });
    });

    在计时器的每一帧中,仿真的alpha系数会不断削减,可通过force.alpha()来获取和设置alpha系数,削减速度由alphaDecay来决定,默认值为0.0228…,衰减系数可通过force.alphaDecay()来获取和设置,当alpha到达一个系数时,仿真将会停止,也就是alpha的目标系数alphaTarget,该值区间为[0,1]. 默认为0,可通过force.alphaTarget()来获取和设置,另外还有一个速度衰减系统velocityDecay ,相当于摩擦力。区间为[0,1], 默认为0.4。在每次tick之后,节点的速度都会等于当前速度乘以1-velocityDecay,和alpha衰减类似,速度衰减越慢最终的效果越好,但是如果速度衰减过慢,可能会导致震荡。以上为tick过程的发生。需要注意的是,在v4版本中,tick事件的callback中不带任何参数,在v3版本的'tick'事件中,我们可通过callback(e)中的e.alpha来获取alpha值,而在v4版本中,alpha值只能通过force.alpha()来获取。

    拖拽 Drag

    创建拖拽操作

    let startTime = 0;
    this.drag = d3.drag()
          .on('start', (d) => {
            startTime = (new Date()).getTime();
            d3.event.sourceEvent.stopPropagation();
            if (!d3.event.active) {
               this.force.alphaTarget(0.3).restart();  // 当前alpha值为0,需设置alphaTarget让节点动起来
            }
            d.fx = d.x;
            d.fy = d.y;
          })
          .on('drag', d => {
            this.grabbing = true;
            d.fx = d3.event.x;
            d.fy = d3.event.y;
          })
          .on('end', d => {
            const nowTime = (new Date()).getTime();
            if (!d3.event.active) {
               this.force.alphaTarget(0);  // 让alpha目标值值恢复为默认值0
            }
            if (nowTime - startTime >= 150) {  // 操作150毫秒的拖拽固定节点
              d.fixed = true;
              d.locked = true;
            }
            this.grabbing = false;
          });

    将拖拽操作应用到指定的选择集。

        d3.select('#outg').selectAll('.node').call(this.drag);

    在内部,拖拽操作通过selection.on来为元素添加监听事件. 事件监听器使用 .drag 来标识这是一个拖拽事件。拖拽drag的v4版本与v3不同的是,v3通过force.drag()创建拖拽操作,拖拽过程事件使用dragstartdragdragend,在拖拽过程中d3内部自动设置alpha相关系数让节点运动起来,而在v4中版本中需要手动设置。

    缩放 Zoom

    在v4版本中,缩放操作通过transform对象进行,可以通过d3.zoomTransform(selection.node())获取指定节点的缩放状态,也可以通过d3.event.transform来获取当前正在缩放的节点的缩放状态。
    与拖拽类似,需要先创建缩放操作。

    const self = this;
    const outg = d3.select('#outg');
    this.zoomObj = d3.zoom()
          .scaleExtent([0.2, 4]) // 缩放范围
          .on('zoom',() => {
            const transform = d3.event.transform;
            self.scale = transform.k;  // 保存当前缩放大小
            self.translate = [transform.x, transform.y];  // 保存当前便宜量
            outg.attr('transform', transform);   // 设置缩放和偏移量 transform对象自带toString()方法
          })
          .on('end', () => {
            // code
          })

    将缩放操作应用于选择集,并取消双击操作

    const svg = d3.select('#svg');
    svg.call(this.zoomObj).on('dblclick.zoom', null);

    如果要禁止滚轮滚动缩放,可以在讲zoom事件应用于选择集之后移除zoom事件中的滚轮事件:

    svg.call(this.zoomObj).on("wheel.zoom", null);

    当缩放事件被调用,d3.event会被设置为当前的zoom事件,zoom event对象由以下几部分组成:

    • target - 当前的缩放zoom behavior。
    • type - 事件类型:“start”, “zoom” 或者 “end”,参考 zoom.on。
    • transform - 当前的zoom transform(缩放变换)。
    • sourceEvent - 原始事件, 比如 mousemove 或 touchmove。

    通过按钮缩放、定位视图。

    this.zoomObj.transform(d3.select('#svg'), d3.zoomIdentity.translate(newX,newY).scale(newScale))

    在v3版本中,可以通过zoom.scale(s)zoom.translate(x, y)设置缩放和偏移量后通过使用'zoom.event(selection)'方法应用到指定选择节点,而在v4中版本需要通过d3.zoomIdentity创建新transform对象,并通过translate(x, y)scale(s)方法设置偏移量和缩放级别,然后将该transform应用到选择集中。另外也可以通过zoom.translateBy(selection, x, y)zoom.translateTo(selection, x, y)zoom.scaleBy(selection, k)zoom.scaleTo(selection, k)方法进行变换。

    小结

    由于api变动较大,v3升级v4需要耐心看api,查看各个部分的变化,所以,升级需谨慎。最后附上d3.js v4.0中文api


    闲适有空一把以上内容封装成组件,详情请见https://github.com/yacan8/d3-react-force

    展开全文
  • D3.js从入门指南

    千次阅读 2018-05-23 16:48:43
    D3.js从入门指南 前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得...

    D3.js从入门指南

    前言

            近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制;而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难。不理解,也看不进去。

            后面因为接触了react、redux,接触了函数式编程。再回过头来从新捣鼓起D3来,感觉没那么困难了,D3其实也有点函数式编程的思路。别被标题吓跑哈,脚踏实地加点毅力D3应该也是可以上手的。

            费话不多说,先上一张让你逆天的数据可视化的效果图,点我查看在线效果

     

     

     

    D3.js基础

    1. 了解SVG图作图

      为什么要学习SVG图呢?因为D3.js堪称SVG中的jQuery,当然你如果想用D3输出Canvas图也可以,但SVG图操作起来更加灵活,更加方便调试,在Chrome中调试可以让你飞起来。

       

    2. 学习D3.js的语法

      语法是必需的,建议自行去官网上学习其语法,或者借/买一本书来同步学习,先尝试实现简单的图形,如果可以的话最好了解一下函数式编程的curry与compose思想,不建议一开始就去接触高大上的众多在线Demo,这样会容易让你误入深渊不能自拔,真的就从入门到放弃。

       

    3. 学习D3.js的编程思路

      1)语法其实可以体现其编程思路,起步当然是学习其强大的选择器,下面感觉一下

      复制代码
      d3.select("body").style("background-color", "black");  // 直接选择 ->并设置属性
      d3.selectAll("p").style("color", function() { // 选择 -> 动态设置属性
        return "hsl(" + Math.random() * 360 + ",100%,50%)";
      });
      d3.selectAll("p") // 选择 -> 绑定数据 -> 动态设置属性
        .data([4, 8, 15, 16, 23, 42])
          .style("font-size", function(d) { return d + "px"; });
      复制代码

       

      2)接着是理解 Update,Enter 和 Exit 的思路

      复制代码
      // Update…
      var p = d3.select("body") // 直接把数据绑定到Dom并输出,数组元素个数与p节点的个数一致就全部更新文本,如果不一致,就只更新现有p节点的文本,多余的数据会被保存起来,看下面会用到
        .selectAll("p")
        .data([4, 8, 15, 16, 23, 42])
          .text(function(d) { return d; });
      
      // Enter…[常用]
      p.enter().append("p") // 如果不一致,数组元素个数比p节点多,就插入p节点补足并相应更新文本
          .text(function(d) { return d; });
      
      // Exit…[常用]
      p.exit().remove(); // 如果不一致,数组元素个数比p节点少,就删除多余的p节点
      复制代码

       

      3) 然后要学习D3的画图一般思路,比如要画一个线状图,那么我们:

      把输入的原始数据转化成为标准的D3可接受的数据格式 -> 根据原始数据定义好x轴函数、y轴函数和定义好作图方式(如d3.line) -> 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数作线状图 -> 再画出标题等细节的东西

       

      4) 最后,给已经完成的图形添加动画效果

      没有动画效果的图形看上去会比较乏味。动画基本写法如下:

      // 把所有圆圈改变半径
      d3.selectAll("circle").transition() // 定义动画
          .duration(750) // 动画持续时间
          .delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始
          .attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果

       

    D3.js实战项目

    注意:下面代码因为结合了React,javascript使用的是ES6,D3版本是最新的V4版,不熟悉的话自行恶补基础。

    一、D3实现简单柱状图[在线demo][源代码]

     

     

    二、D3实现简单简单面积图[在线demo][源代码]

     

    三、D3实现简单简单饼图、圆环图[在线demo][源代码]

     

    四、D3实现径向堆栈柱状图[在线demo][源代码]

     

    五、D3实现简单弦图[在线demo][源代码]

     

    六、D3实现简单打包图[在线demo][源代码]

     

    七、D3实现雷达图[在线demo][源代码]

     

    八、D3实现力导向图[在线demo][源代码]

     

    九、D3实现中国地图[在线demo][源代码]

    交流与学习

    1. 本文作者:Nelson Kuang,别名:Fast Mover  欢迎大家留言及多多指教
    2. Github地址:https://github.com/nelsonkuang/ant-admin
    3. 版权声明:欢迎转载学习 => 请标注信息来源于http://www.cnblogs.com/fastmover/p/7779660.html
    展开全文
  • [译]D3.jsd3-selection 原理

    千次阅读 2018-06-29 11:04:34
    [译]D3.jsd3-selection 原理 译者注 原文: 来自 D3.js 作者 Mike Bostock 的How Selections Works 译者: ssthouse 译文 在前一篇文章中, 我介绍了关于 D3 selection 的基础, 这些基础足以让你开始...
  • js.创建节点 最近,我一直在使用D3可视化React项目的数据,这引起了我一段时间的注意。 我对这个非常强大的工具的范围特别感兴趣,该... D3.js是用于可视化数据JavaScript库。 结合使用__SVG__ (支持矢量图形)_...
  • 知识图谱可视化前奏之d3.js0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话0.说...
  • 转载--D3.js

    2018-03-21 16:20:09
    前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的...
  • 页面生成柱状图 --- D3.js

    千次阅读 2018-07-12 16:19:27
    转载自:https://www.cnblogs.com/fastmover/p/7779660.htmlD3.js从入门到“放弃”指南前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库...
  • 本文基于d3.js中的力导向图对关系网络进行可视化。针对实体之间多关系亦即节点之间多条连接线的问题,采用弧形连接线,同时对节点间的多条连接线进行动态编号,并根据编号绘制不同半径的弧线,从而解决多条弧形连接...
  • 最近,我们有幸参与了一个机器学习项目,该项目涉及 React D3.js 之类的库。在许多任务中,我开发了几个图表用来展示诸如朴素贝叶斯这样的机器学习模型的处理结果,图表以折线图或分组柱状图的形式呈现。 我会在...
  • 二、如何理解D3给Dom节点绑定数据时的Update、EnterExit模式 三、D3绑定数据时用datum与data有什么不一样? 四、SVG图中用attr来设置属性用style来设置样式时,用style来设置样式的权重会更高 五、D3...
  • 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方...
  • 转载自D3.js从入门到“放弃”指南 前言 &nbsp; &nbsp; &nbsp; &nbsp; 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,...
  • 了解D3.js-数据可视化

    2017-07-26 12:48:47
    什么是D3.js? D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。 ...
  • 前言:Qumulo是一家总部位于美国西雅图的企业数据存储公司,专注于开发简单灵活、可扩展高效的企业数据智能存储系统。 原文:http://qumulo.com/blog/front-end-engineering-at-qumulo-react-d3-js/ 作者:...
  • 让我们结合它的源码,探究一二!(当前源码为react16,读者要对react有一定的了解) &lt;figure&gt;[图片上传中...(image-45230e-1541081363064-20)] &lt;figcaption&gt;&lt;/figcaption&...
1 2 3 4 5 ... 20
收藏数 1,121
精华内容 448
关键字:

d3.js 和react 结合