d3.js | 易学教程

How to generate svg client-side with d3 without attaching it to the DOM (using with React.js)

阅读更多关于 How to generate svg client-side with d3 without attaching it to the DOM (using with React.js)

问题 I'm using React.js to build an app, which includes quite a few svg charts. I'm using d3 functions that help in chart creation, such as scales, but then using React to generate the svg elements. Here's a great writeup on the approach: http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/ Part of why I'm going down this road was for performance - the first version of the app was too slow. It has a lot of elements and a lot of user-interactivity, all client-side. I'm trying to

NVD3 line chart with vertical line

阅读更多关于 NVD3 line chart with vertical line

问题 I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart. The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both. Something like this: Is this feasible? Edit: I found out a way to do this by just appending to the data an extra stream which represents a line. e.g. streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]} Is there a better way? 回答1: Yes it's possible, Here is an example of how to do it :

Integrating d3 with meteor? Trying to draw pie charts

阅读更多关于 Integrating d3 with meteor? Trying to draw pie charts

问题 I'm trying to draw pie charts in Meteor, but I'm very new to both d3 and Meteor and am not really understanding what is going on. The following d3 code to draw pie charts from a csv file works for me outside of Meteor: <!DOCTYPE html> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <style> body { font: 30px "Montserrat"; text-transform:uppercase; } svg { padding: 10px 0 0 10px; } .arc { stroke: #fff; } </style>

d3JS: Bisecting a Nested Array

阅读更多关于 d3JS: Bisecting a Nested Array

问题 As a follow up to this question, I've managed to create a multi-series line chart out of nested arrays. I'm now trying to add tooltips to chart similar to the one on this post by Mike Bostock. This means that I have to figure out a method for bisecting the nested array and then selecting those values for a tooltip. How do I transfer the lines of code below to a nested array? bisectDate = d3.bisector(function(d) { return d.date; }).left, Further into the script: i = bisectDate(data, x0, 1), d0

Can I use JasperReports like D3.js?

阅读更多关于 Can I use JasperReports like D3.js?

问题 Can I use JasperReports like D3.js. D3 js is a JavasSript lib to generate user interactive reports, for example user can use particular area in report like . Is JasperReports really support like these features? 回答1: It doesn't look like Jasper Reports supports this at the moment, but you could implement D3 support in a custom component as suggested here. 来源： https://stackoverflow.com/questions/21347998/can-i-use-jasperreports-like-d3-js

D3 Stacked Chart with JSON data

阅读更多关于 D3 Stacked Chart with JSON data

问题 I want to create a Stacked bar chart like http://bl.ocks.org/mbostock/3886208 . But I don't want to use CSV file. How can I change this sample by using JSON data? Anyone could help? 回答1: Your question is a bit vague but let's say we convert that CSV file to JSON data as: var data = [{ "State": "VT", "Under 5 Years": 32635, "5 to 13 Years": 62538, "14 to 17 Years": 33757, "18 to 24 Years": 61679, "25 to 44 Years": 155419, "45 to 64 Years": 188593, "65 Years and Over": 86649 }, { "State": "VA",

d3 time format x axis showing same value

阅读更多关于 d3 time format x axis showing same value

问题 I am trying to plot dates along the x axis of a d3.js graph. However I am getting the same value repeated along the a axis, when there should be different values instead. I am formatting the date as follows: var format = d3.time.format('%m/%d/%Y %H:%M').parse; Then directly after the data call: data.forEach(function(d) { d.timestamp = format(d.timestamp); // d.timestamp is from the data }); Then setting the domain as follows: var xScale = d3.time.scale().range([0, width]); xScale.domain([d3

D3.js: Accessing Object Property inside Array for Creating Line Graph

阅读更多关于 D3.js: Accessing Object Property inside Array for Creating Line Graph

问题 I'm trying to create a line graph using d3.js with this data structure: var dataset1 = [ {"video_name": "Apples", "video_views": 100}, {"video_name": "Oranges", "video_views": 35}, {"video_name": "Grapes", "video_views": 20}, {"video_name": "Avocados", "video_views": 85}, {"video_name": "Tomatoes", "video_views": 60} ] The index number of the object is the x-value and the "video_views" is the y-value. The problem: It is appending the svg canvas, and the "g" element just fine, but the x and y

Multiple straight line between two node in d3.js

阅读更多关于 Multiple straight line between two node in d3.js

问题 How to add a multiple straight line between two nodes. The following fiddle shows the arc line. Can change it in straight line with the particular space between lines. I found answer. But in the following fiddle http://jsfiddle.net/manimegala/FC832/ can draw multiple line between two nodes. But when I drag a node, the link overlap with each other. Please help me to draw multiple line between two nodes without overlap. sample data "links":[ {"source":0,"target":1,"value":1,"distance":5,"no":1}

D3 Datum Update Boxplot

阅读更多关于 D3 Datum Update Boxplot

问题 I am trying to update 3 svgs (BoxPlots). In the following code the var svg contains an array of the 3 svgs and the _data_ has been updated to the correct number of records. I follow the BoxPlot Example , but cannot see what I am doing wrong. $('#Records li a ').click(function() { var id = event.target.id; var idparts = id.split("_"); var numrec = idparts[1]; d3.json("./php/connection2.php?numrecs="+numrec, function (error, csv) { d3.json("./php/connection2.php?numrecs="+numrec, function