d3.js | 易学教程

Server Side d3 - Encoding SVG as a Base64 Image

阅读更多关于 Server Side d3 - Encoding SVG as a Base64 Image

问题 I'm trying to encode a D3 chart as a base64 image for use in HTML emails So far I have: var express = require('express'); var app = express(); var jsdom = require('jsdom'); app.get('/chart', function (request, response) { try { jsdom.env( "<html><body><svg id=\"svg\"></svg></body></html>", ['http://d3js.org/d3.v3.min.js'], function (err, window) { var svg = window.d3.select("svg") .attr("width", 100) .attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80)

How to filter views with an opacity range in d3/dc.js?

阅读更多关于 How to filter views with an opacity range in d3/dc.js?

问题 I don't know if this is possible in dc.js and crossfilter.js , but I decided to ask anyways. I combined a scatterplot and a barChart example from dc to make an interactive dashboard: var chart1 = dc.scatterPlot("#test1"); var chart2 = dc.scatterPlot("#test2"); d3.csv("output.csv", function(error, data) { data.forEach(function (x) { x.x = +x.x; x.y = +x.y; x.z = +x.z; }); var ndx = crossfilter(data), dim1 = ndx.dimension(function (d) { return [d.x, d.y]; }), dim2 = ndx.dimension(function (d) {

D3.js : Removing dynamically added Pie Chart slices

阅读更多关于 D3.js : Removing dynamically added Pie Chart slices

问题 I am able to generate pie chart and add data to it dynamically, based on user interaction. Here is the fiddle http://jsfiddle.net/L5Q8r/ The problem I am facing is during the data removal from pie-chart. When the checkbox is unchecked, I am deleting the data from "dataset" and updating the chart. The chart is getting updated but the previous "slice of pie" is still visible to user. I tried adding the ".exit().remove()" but no success. Here is what I did: var updateChart = function (dataset) {

How to filter views with an opacity range in d3/dc.js?

阅读更多关于 How to filter views with an opacity range in d3/dc.js?

D3 Reusable Chart Function Creating Multiple Charts

阅读更多关于 D3 Reusable Chart Function Creating Multiple Charts

问题 I've built a reusable chart function (hat tip to Mike Bostock - http://bost.ocks.org/mike/chart/): function chartBubble() { var width = 800, height = 800; function chart() { var svg = d3.select("#chart").append("svg") .attr("width", width) .attr("height", height); // generate rest of chart here } chart.width = function(value) { if (!arguments.length) return width; width = value; return chart; }; return chart; } This works great initialy by calling the function: d3.csv("data.csv", function

D3 Line-Path Intersection

阅读更多关于 D3 Line-Path Intersection

问题 I'm working with D3 and I've run into a bit of a problem. Basically, I have a small area chart whose domain changes based on a brush (similar to this example: http://bl.ocks.org/mbostock/1667367). I've created a line which can be dragged around and what I had hoped to do is provide a tooltip where this line intersected the area chart. I've created a function which bisects the data from the chart based on the x-value of the line and returns the closest data point... the issue is that this

Adding and removing nodes and links from force diagram in d3 based on filter dropdown

阅读更多关于 Adding and removing nodes and links from force diagram in d3 based on filter dropdown

问题 I'm trying to make a force diagram, with a couple of drop down boxes which filter the data on display. The first one (which is where I'm almost at now) checks for the type, and only shows nodes & links which have a source or target matching the type. What I have now, is the ability to select the filter, and the graph updates, it removes unnecessary nodes, and reformats the remaining ones to be correct. But it only works the first time. If I 're-filter' it starts to go haywire. Here's my full

How To Move (Drag and Drop) multiple Shapes with D3

阅读更多关于 How To Move (Drag and Drop) multiple Shapes with D3

问题 How do I move (drag and drop) multiple shapes with d3. I tried putting some shapes in a svg and move the svg - this works but not smoothly. This is what I got so far <html> <head> <script type="text/javascript" src="d3.v3.min.js"></script> <title>Creating SVG groups with D3.js</title> </head> <body> <script type="text/javascript"> // http://tutorials.jenkov.com/svg/g-element.html d3image = d3.select("body"); svgcanvas = d3image.append("svg:svg").attr("width", 700).attr("height", 500); svg1 =

dimple.js How can I change the labels of a chart axis without changing the data?

阅读更多关于 dimple.js How can I change the labels of a chart axis without changing the data?

问题 Say we have the bar chart of the example http://dimplejs.org/examples_viewer.html?id=bars_vertical and I want to change the x axis label from "Months" to "Meses". How can I do that? 回答1: Instead of changing the titleShape after drawing, you can also change the title directly before drawing. To do so, simply assign the title property: var chart = new dimple.chart(svg, data); var x = chart.addCategoryAxis("x", ["Fruit", "Year"]); x.title = "My New Title"; 回答2: After drawing you can access the

Tooltip to display in two separate lines not working in Firefox

阅读更多关于 Tooltip to display in two separate lines not working in Firefox

问题 I am adding a tooltip with the <br> tag of html. It is working fine in chrome but not on firefox. My code: var dot = svg.append("g") .attr("class", "dots") .selectAll(".dot") .data(interpolateData(1)) .enter().append("circle") .attr("class", "dot") // Add a title. dot.append("title") .each(function() { var d = d3.select(this); d3.select(this).select("title") .html(function(d,i) { return d.name + ": " + Math.round(Number(d.avg)) + " avg each month <br>" + d.name + ": Build of " + Math.round