d3.js

问题 I have an svg element I'd like to be able to click and drag separately. As far as I can tell in D3, clicking fires the "drag end" event (and possibly also drag start?). In the code below, simply clicking the circle gives it a red outline: var svg = d3.select('body').append('svg'); var g = svg.append('g'); var c = g.append('circle').attr('r', 20).attr('cx', 25).attr('cy', 25) .call(d3.drag().on('drag', dragged).on('end', end)) .on('click', clicked); function dragged() { d3.select(this).attr(

问题 I have an svg element I'd like to be able to click and drag separately. As far as I can tell in D3, clicking fires the "drag end" event (and possibly also drag start?). In the code below, simply clicking the circle gives it a red outline: var svg = d3.select('body').append('svg'); var g = svg.append('g'); var c = g.append('circle').attr('r', 20).attr('cx', 25).attr('cy', 25) .call(d3.drag().on('drag', dragged).on('end', end)) .on('click', clicked); function dragged() { d3.select(this).attr(

问题 This seems like it'd be a simple question to answer but I'm having a hard time doing so: Is it possible to "wrap" existing SVG shapes in a new SVG g tag (i.e. group) using d3.js, the way .wrap() works in jQuery? If I were to simply create a new g tag "manually", how would I then go about moving an existing element into that g? 回答1: If you pass an existing DOM element to append or insert , the element (and it's children) will be moved from their current place in the DOM hierarchy to wherever

问题 I am developing Normalized stacked bar chart using d3.js,and trying to append a text on rect.It is getting appended when i inspect in browser.But it is not visible.I want something like this, Here is my code, var margin = {top: 20, right: 100, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .11); var y = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.ordinal()

问题 I have text in the format var text = "{{A-B-C}{A-C-B}D-B}{E}F" //example 1 The text can be something else like: var text = "{{{A-B-C}{C-A-B}D-E}{B-C}E-A}{F}G" //example 2 So the node structure can change but the delimiting of - and {} remains the same to indicate heirarchy. I would like to create a tree out of this either as a javascript object or JSON for d3js tree layout. I can use lodash/jquery or any other library I wish. The eventual layout I need is like this image, for the var text

问题 I have two arrays, one containing the data which should go into the X axis, the other the data which should become the Y entries. How can I tell d3.js to take the data from those arrays and use it as data for its graph and then draw it? 回答1: Can you use anything on top of D3? If so, check out http://c3js.org. C3 is built on top of D3, and it makes creating simple charts much easier. 回答2: I needed to solve a similar problem. I've assembled the code I used and put it into a fiddle. However, I'm

问题 Context : I am working on a webapp that has to display some fairly complicated and constantly updating (multiple times per second) SVG images. The updates stem from a seperate server and the SVG is updates as soon as an update is received by the web frontend. The webapp is written in Scala.js and the image is created using the d3js library (see also: scala-js-d3). We currently only support Google Chrome. Problem : Once the webapp has been in a background tab for a while, the whole site gets

问题 Context : I am working on a webapp that has to display some fairly complicated and constantly updating (multiple times per second) SVG images. The updates stem from a seperate server and the SVG is updates as soon as an update is received by the web frontend. The webapp is written in Scala.js and the image is created using the d3js library (see also: scala-js-d3). We currently only support Google Chrome. Problem : Once the webapp has been in a background tab for a while, the whole site gets

问题 I'm having a problem using the SimulationLinkDatum Type. I made two classes Node and Link that implement SimulationNodeDatum and SimulationLinkDatum. When I go to try and use SimulationLinkDatum typescript says that d.source.x, d.targe.x, etc typescript says that " Property 'x' does not exist on type 'string | number | Node'. " I understand that the SimulationLinkDatum accepts number | string | <T> for the source and target node properties and that if you use number or string that it will be

问题 Say we have the following crossfilter / dc.js app: While this is nice, the user loses "reference" the population when brushing. I would like for charts x , y , z , and a to keep the "underlying" bars when other charts are brushed. Perhaps in a different color like so: I believe this may require updating the dc.renderAll() function, but I am not sure even how to start. Here is all the code to reproduce this app with the .csv data hosted as a gist. <!DOCTYPE html> <html lang="en"> <head> <title