随笔分类 - D3
摘要:import React, {Component} from 'react'; import * as d3 from 'd3'; import 'd3-geo'; import * as topojson from 'topojson'; import * as colorbrewer from 'colorbrewer'; const us = require('./us.json');...
阅读全文
摘要:Install: Code: Github: Link
阅读全文
摘要:The way to add hovercard is Append a div with class 'hovercard' in the tick function, positioning the hovercard with 'd3.event.pageX and pageY'
阅读全文
摘要:If we want to add text to a node or a image
阅读全文
摘要:We can create node with 'g' container, then append 'image' to the nodes. Then on each 'tick', we need to position the nodes:
阅读全文
摘要:svg.append('defs').selectAll('marker') .data(['end']).enter() .append('marker') .attr('id', String) .attr('viewBox', '0 -5 10 10') // start at ...
阅读全文
摘要:Here we have a force layout with three nodes. In the example, we will link three nodes with line and path:
阅读全文
摘要:Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look at React's lifecycle methods, using them to boots
阅读全文
摘要:When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstra
阅读全文
摘要:In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selectio
阅读全文
摘要:D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This can present some challenges when attempting to cr
阅读全文
摘要:D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in new items or tweening existing shapes to display new
阅读全文
摘要: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
阅读全文
摘要:Similar to line charts, area charts are great for displaying temporal data. Whether you’re displaying a single set of data or multiple sets using an o
阅读全文
摘要:Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplifi
阅读全文
摘要:Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to
阅读全文
摘要:Column and bar charts are staples of every visualization library. They also make a great project for combining the essential pieces of D3 like selecti
阅读全文
摘要:Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the viewBox attribute, which is used to con
阅读全文
摘要:Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs
阅读全文
摘要:You can’t add axes to a chart if you don’t make room for them. To that end, the D3 community has adopted a simple convention for defining margin sizes
阅读全文