[D3] Build a Line Chart with D3 v4
2017-08-14 19:38
543 查看
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 simplified version of the charts seen on Google Finance.
var margin = { top: 10, right: 20, bottom: 65, left: 40 }; var width = 400 - margin.left - margin.right; var height = 600 - margin.top - margin.bottom; var svg = d3.select('.chart') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .call(responsivefy) .append('g') .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); /** * Load data */ d3.json('../data/data3.json', function (err, data) { const parseTime = d3.timeParse('%Y/%m/%d'); data.forEach(company => { company.values.forEach(d => { d.date = parseTime(d.date) d.close = +d.close }) }) /** * x axis */ const xScale = d3.scaleTime() .domain([ d3.min(data, co => d3.min(co.values, d => d.date)), d3.max(data, co => d3.max(co.values, d => d.date)) ]) .range([0, width]) .nice(); svg.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale).tickSize(10).tickPadding(5)) .selectAll('text') .attr('text-anchor', 'end') .attr('transform', 'rotate(-45)'); /** * Y axis */ const yScale = d3.scaleLinear() .domain([ d3.min(data, co => d3.min(co.values, d => d.close)), d3.max(data, co => d3.max(co.values, d => d.close)) ]) .range([height, 0]) .nice(); svg.append('g') .call(d3.axisLeft(yScale)); /** * Create lines */ const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.close)) .curve(d3.curveCatmullRom.alpha(0.5)); //smmoth the line svg .selectAll('.line') .data(data) .enter() .append('path') .attr('class', 'line') .attr('d', d => line(d.values)) // draw the line .style('stroke', (d, i) => ['#FF9900', '#3369E8'][i]) .style('stroke-width', 2) .style('fill', 'none'); }); function responsivefy(svg) { // get container + svg aspect ratio var container = d3.select(svg.node().parentNode), width = parseInt(svg.style("width")), height = parseInt(svg.style("height")), aspect = width / height; // add viewBox and preserveAspectRatio properties, // and call resize so that svg resizes on inital page load svg.attr("viewBox", "0 0 " + width + " " + height) .attr("preserveAspectRatio", "xMinYMid") .call(resize); // to register multiple listeners for same event type, // you need to add namespace, i.e., 'click.foo' // necessary if you call invoke this function for multiple svgs // api docs: https://github.com/mbostock/d3/wiki/Selections#on d3.select(window).on("resize." + container.attr("id"), resize); // get width of container and resize svg to fit it function resize() { var targetWidth = parseInt(container.style("width")); svg.attr("width", targetWidth); svg.attr("height", Math.round(targetWidth / aspect)); } }
相关文章推荐
- [D3] Build an Area Chart with D3 v4
- [D3] 14. Line and Area Charts with D3
- [D3] Load and Inspect Data with D3 v4
- [转] PhoneGap build with iOS from the command line
- build failed with script: gradlew.bat :app:assembleDebug -P freelineBuild=true --stacktrace
- How to plot line chart with Real-time data at Dialog-base application?
- [D3] Start Visualizing Data Driven Documents with D3 v4
- Draw Line and Bar Chart with Matplotlib 画线和图表
- python错误:SyntaxError: Non-UTF-8 code starting with '\xcb' in file E:/Python/test.py on line 2
- 项目管理实践【四】自动编译和发布网站【Using Visual Studio with Source Control System to build and publish website automatically】
- Build node.js with clang.
- Process 'command 'E:\AndroidPath\SDK\build-tools\27.0.3\aapt.exe'' finished with non-zero exit value
- xcode Build Phases 增加新内容;SDL2 renderer already associated with window 错误
- d3 v4版本画基本图
- sizeWithFont:constrainedToSize:lineBreakMode的使用 (2012-03-20 10:48:40)转载▼ 标签: 宽度 字符串 获取 指定 用于 杂谈 分类:
- Command /Developer/Library/Xcode/Plug-ins/CoreBuildTasks.xcplugin/Contents/Resources/copystrings failed with exit code 1
- Flex中用鼠标拖动LineChart图表的折线
- Metronic V1.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0
- Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-wttdx0g1/secp256k1/
- 4: Create A Virtualenv( Challenge: Working with the Command Line)