d3.js | 易学教程

Starting Transitions and Animations With Area Graph in D3.JS

阅读更多关于 Starting Transitions and Animations With Area Graph in D3.JS

问题 I want to have the area graph "draw" itself at the start of the program from left to right. I already have one line in my graph doing this, however I cannot get the area under the line to correctly animate, or "draw" itself when the page first boots up. Currently, this is what I have for my area. var area = d3.svg.area() .x(function(d) {return xScale(d.date); }) .y0(line_chart_height) .y1(function(d) {return yScale(d.close); }); line_chart.append("path") .datum(data) .attr("class", "area")

R / d3heatmap / shiny - is there a way to embed images in d3 tooltip?

阅读更多关于 R / d3heatmap / shiny - is there a way to embed images in d3 tooltip?

问题 I'd like to embed images (rather than the default Row - Column - Value data) in the d3 tooltip when scrolling over a cell. library(shiny) library(d3heatmap) ui <- shinyUI(fluidPage( titlePanel("Old Faithful Geyser Data"), mainPanel( d3heatmapOutput("out") ) ) ) server <- shinyServer(function(input, output) { output$out <- renderD3heatmap({ d3heatmap(x = mtcars, Colv = NULL, scale= "column", key = FALSE, yaxis_font_size = "10pt", xaxis_font_size = "10pt") }) }) shinyApp(ui = ui, server =

How to Integrate a data-driven d3JS graph with Shiny?

阅读更多关于 How to Integrate a data-driven d3JS graph with Shiny?

问题 Yesterday I asked how to bring a d3js javacript file with self-contained data into Shiny to draw a force network graph. Now I am looking for the next step: server.R will read a JSON data file for display in the graph. I've been trying to adapt this example that uses messageHandlers to pass the data into the d3JS. This is beyond my expertise so I am looking for some help. I'm pretty sure it is in the messageHandler where things go awry. I will gladly publish the full working example because

How to add a nice legend to a d3 pie chart

阅读更多关于 How to add a nice legend to a d3 pie chart

问题 I have my pie chart working ok but I would like to add a nice legend kind of like this (made in mspaint) but can't quite make it work... Here is my pie chart code (without the legend part) : <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var newData = [{ count: 1, emote: "OneTwoThree" }, { count: 1, emote: "FourFiveSix" }, { count: 1, emote: "SevenEightNine" }, { count:

D3.js key function running twice on simple selector/array combo

阅读更多关于 D3.js key function running twice on simple selector/array combo

问题 Learning d3 and when I create a simple array of numbers, then attempt to bind the data to a simple set of elements, but use the key function, it runs through the loop twice. The first time through, it tells me that the values of the array are undefined. The second time through they are available. Here is the html: <div class="testBind"></div> <div class="testBind"></div> <div class="testBind"></div> And here is the js: var numbers = [1, 2, 3]; function whichNumber(n){ console.log('n----:' + n

d3.js brush fill color histogram

阅读更多关于 d3.js brush fill color histogram

问题 i have created some histogram with d3.js . I managed to change fill color of rect depending on the position of the brush . But i would like to change the color inside a rect . For example if the brush start is in the middle of the rect i would like to have my rect with two color. At the moment this is what i have : And this is what i would like to have : I have seen some examples like Here. I'm new to d3 and i try to understand the code. I see that they use clip-path that certainly hide the

d3 tree - parents having same children

阅读更多关于 d3 tree - parents having same children

问题 I have been transitioning my code from JIT to D3, and working with the tree layout. I have replicated the code from http://mbostock.github.com/d3/talk/20111018/tree.html with my tree data, but I wanted to do a little more. In my case I wanted to create child nodes that merge back to form a parent at a lower level, which I realize is more of a directed graph structure, but would like the tree to accomodate this (i.e. notice that common id's between child nodes should merge). So basically a

Requirejs, d3 and nvd3 integration

阅读更多关于 Requirejs, d3 and nvd3 integration

问题 I'm facing the problem of integrating requirejs with d3 and nvd3, and i found an easy solution using require's shim. Using the shim i can export a variable, and i can also define dependencies: d3: { exports: 'd3' }, nvd3: { exports: 'nv', deps: ['d3'] }, In this way, i simply install d3 and other packages with bower, and include them with require, and it is really quick and clean. Nonetheless, i faced the following problem: there are probably some clashes between the global d3 variable and

Iterate over already created nodes in D3js

阅读更多关于 Iterate over already created nodes in D3js

问题 I am using a force-directed graph and am adding newly created nodes to the graph. This works perfectly fine. My node has a property called "state" that keeps changing. The problem I'm facing is that, in my code, the condition to check the "state" is only checked when a new node comes in. When theres an update, my JSON is updated with the state but the execution doesn't reach the code for checking the state. Find my code below: function buildGraph() { // Update link data link = link.data(links

Export SVG elements to PDF?

阅读更多关于 Export SVG elements to PDF?

问题 I have a visualization generated by d3 (a javascript visualization library similar to Protovis or Raphael, which draws stuff using SVG elements). The vis is interactive, so the user can interact with and edit it. Once the user is satisfied with his/her visualization, I would like the user to be able to export this visualization as a PDF. I've tried several HTML to PDF libraries and they don't work with SVG elements. It is okay if the solution is either client side or server side. I'm using