d3.js | 易学教程

How to add a tooltip that shows a bar chart onto a d3.js map

阅读更多关于 How to add a tooltip that shows a bar chart onto a d3.js map

问题 I have a map of the US with markers for stores in each state and currently when you hover over each marker, the name and address of that store shows up. I used a json file (us.json) to get the states coordinates and boundaries. The second json file (newstorelocations.json) contains information about each store and it's location which I used to display the markers. I used a tooltip for this. What I currently have is at: http://bl.ocks.org/binishbaig/3969ec74b485d1021034 gist: https://gist

d3 bar chart with sub categories

阅读更多关于 d3 bar chart with sub categories

问题 Is it possible to have sub categories in a bar chart in d3? I don't think it's possible out of the box, but maybe someone has an idea of how to do it. An example would be sales of products (A, B, C) per month: = = = = = = = = = = = = = = = = +-+-+-+-+-+-+-+-+- ... | A B C | A B C | ... | Jan | Feb | ... I'm not sure how I would go about adding another dataset to a bar chart. 回答1: Take each set of data you have, added it a list and then transpose the data. var dataA = [1, 2, 3, 4, 5]; var

Adding dots to D3.js graph

阅读更多关于 Adding dots to D3.js graph

问题 I am a novice to D3, and need to create a graph of two data sets. I was able to create this, after adapting code that I found here, and was able to make things work with my JSON data, but have not been able to incorporate dots or the stroke into my version. I tried to make a "dots" variable in the same fashion as the "lines" variable: var dots = canvas.selectAll(".dot") .data(dataArray, function(d){ return line(d.values);}) .enter() .append("circle") .attr("class", "dot") .attr("cx", line.x()

Dynamically new dimensions with D3 JS parallel sets

阅读更多关于 Dynamically new dimensions with D3 JS parallel sets

问题 Hi i'm trying to dynamically change the dimensions of my parallel set chart. http://www.jasondavies.com/parallel-sets/ var chart = d3.parsets() .dimensions(["Survived", "Sex", "Age", "Class"]); var vis = d3.select("#vis").append("svg") .attr("width", chart.width()) .attr("height", chart.height()); d3.csv("titanic.csv", function(csv) { vis.datum(csv).call(chart); }); i want to dynamically change "Survived", "Sex", "Age", "Class" to "Survived, "Age", "Class" with a simple checkbox. what i have

how to add brush in nvd3 like d3

阅读更多关于 how to add brush in nvd3 like d3

问题 I am creating graph in nvd3 FIDDLE I am done with graph and its working nicely but now I want to add brush in it like d3 see this example: http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e crossfilter but is it possible to use brush like d3 and nvd3 has any brush function ? please help me. nv.addGraph(function() { var chart = nv.models.multiBarChart(); chart.xAxis .tickFormat(d3.format(',f')); chart.yAxis .tickFormat(d3.format(',.1f')); chart.multibar

d3js Text Transitioin - 1 example code not working

阅读更多关于 d3js Text Transitioin - 1 example code not working

问题 I am new to d3.js and trying to execute some of the example codes given in the d3 examples. I tried copying the Text Transition-1 (link) example code. But came across this error in the console text-transition.html:26 Uncaught TypeError: d3.select(...).transition(...).duration(...).on is not a function Here is the code I executed: <!DOCTYPE html> <html> <head> <title>Text Transition animation 1</title> <meta charset="utf-8"> <style> h1 { font: 400 120px/500px "Helvetica Neue"; text-align:

Position circles on a horizontal axis without overlapping using force layout

阅读更多关于 Position circles on a horizontal axis without overlapping using force layout

问题 I would like to position circles on a d3 scale and relax them in such a way that they do not overlap. I know that this decreases accuracy, but that's okay for the type of chart that I would like to generate. This is my minimum (non-)working example: https://jsfiddle.net/wmxh0gpb/1/ <body> <div id="content"> <svg width="700" height="200"> <g transform="translate(50, 100)"></g> </svg> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script> var width =

Force simulation of texts on bubble-chart does not work

阅读更多关于 Force simulation of texts on bubble-chart does not work

问题 I have a script in which I make circles and then append text to them. I want to use force simulation so that texts of different circles don't overlap. The issue that I am currently facing is shown in graph below: (2 red circles on the left have overlapping text) I used force simuation in my script for texts but nothing happens. I am not getting any error but still the texts are overlapping. I have tried many solution but nothing seems to work. Following is my script: function graph(data){ /

How to bubble chart aligned bottom and stick to each other

阅读更多关于 How to bubble chart aligned bottom and stick to each other

问题 I would like to ask if there is a way to achieve the layout and arrangement of the circles on the image. I would like create a chart of series of circles that are link together and all aligned in the bottom. 回答1: The distance between two circles with radii r1 and r2 is: You can use this to position your circles on the x-axis. For an example see: http://bl.ocks.org/7a9d6c4725367aaed5db . 来源： https://stackoverflow.com/questions/14826815/how-to-bubble-chart-aligned-bottom-and-stick-to-each-other

Insert images into dendogram's leaves using d3.js

阅读更多关于 Insert images into dendogram's leaves using d3.js

问题 I am using Cluster Dendogram . And I want to insert images in to the leaves of the dendogram according to my clustering results. How can I do that? <!DOCTYPE html> <meta charset="utf-8"> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 10px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> <body> <svg id="mySvg" width="80" height="80"> <defs id="mdef"> <pattern id="image" x="-100" y="-100" height="200" width="200"