d3.js

问题 So I read in a csv file on Country GDP, and I filtered out unwanted columns and countries. Now I want to know how to extract the values from this array of objects and use them to create x and y axes for a multi-series line chart. Here is my code function country(element) { return element.CountryName == "Brazil" || element.CountryName == "China" || element.CountryName == "Russian Federation" || element.CountryName == "United Kingdom" || element.CountryName == "United States" || element

问题 http://jsfiddle.net/pRkpL/ and http://fiddle.jshell.net/pRkpL/show/ I am making an arc diagram which is based heavily on this demo: http://bl.ocks.org/sjengle/5431779. It's taken me a while to get to this stage, and the graph now adapts to the data in all the ways I need it to. However, I have 2 questions: 1) I need to create 2 arc diagrams - one above the black rectangles (named buckets in the code) and one below. As a temporary fix, I have used css3 3D transforms to flip one of the arc

问题 I am attempting to draw a series of vertical lines on a d3 chart. The data source for this is a list of x positions (in the data) which is mapped through the x() scale function to give the correct position. At present this is implemented as a for loop for each entry in the labels variable. The y origin and endpoint are taken from the data minY and maxY . A text label is attached to the end of the line. labels = [ { 'x':50, 'label':test' } var label = svg.append("g") .attr("class","ilabel") //

问题 I had some difficulty a while back adding and removing nodes based on user input which was solved by updating the entire set of objects pushed into force.nodes() each time the user selected which they wanted to view from a list of checkboxes. Updating from a slider however I think requires a more finesse touch - I don't want to update the entire set every time the slider is moved. I want to push and pop nodes in and out of force.nodes(). With my current code the nodes are coming out just fine

问题 I'm using images as nodes in a D3js force directed graph. On a particular event, I want to gray-out this image. Is there a way to to achieve this? I tried reducing opacity but it doesn't give the desired effect. 回答1: Did you actually want to make it grayscale? Borrowing from here. // set up filter svg.append('filter') .attr('id','desaturate') .append('feColorMatrix') .attr('type','matrix') .attr('values',"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0");

问题 I'm working on a team project and the d3 map is rendering correctly on everyone else's computer but mine. Here's my map code snippet: var g = svg.append("g"); // as written, the function(error, us) callback won't fire until the d3.json finishes d3.json("json/usa_map.json", function(error, us) { g.selectAll("path") .data(us.features) .enter() It breaks on us.features and it says there is no method "features" on undefined. Here is my geoJson snippet: { "type": "FeatureCollection", "features": [

问题 I have a large dataset in an array which translates into about a million 6-pixel wide bars, Given that about 130 bars fit into 800 pixels of screen, I need to only display a portion of the data at a time. Then, when the user pans the chart, new data will be added and non-visible data will be removed. The user could pan right or left so data need to be able to enter and exit from both sides of the chart. I feel like the solution involves D3's enter and exit , but I'm unsure how to implement it

问题 I'm using lastest d3js with force layout to create interactive graph like this: Requirements are: Nodes can be dragged (inertial drag) Node bounces back when hitting border. Nodes don't overlap each other (I can do this based on Collision Detection sample) Somebody please help me with 1 & 2. The background for this question is in this related question. Thank you. 回答1: Background The background for this answer is in my answer to a related question here. That question was about why nodes jump

问题 d3.select("#save").on("click", function(){ var html = d3.select("svg") .attr("version", 1.1) .attr("xmlns", "http://www.w3.org/2000/svg") .node().parentNode.innerHTML; //console.log(html); var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); var img = '<img src="'+imgsrc+'">'; d3.select("#svgdataurl").html(img); }); this is the code but its not showing the copied image at all. what is the problem? this is the code from http://techslides.com/save-svg-as-an-image/ . my line chart has mouse

问题 I have a simple zoomable chart from d3 zoomable area It has date x-axis, when user zooms, i want to get chart x-axis bound values. For example i zoomed like this, I would like to get x-axis values, 23-May-2015 and 31-May-2015 for my internal needs, is possible? Tried this but no success function draw(){ var e = d3.event; if(e){ var tx = Math.min(0, Math.max(e.translate[0], width - width*e.scale)); var ty = Math.min(0, Math.max(e.translate[1], height - height*e.scale)); console.log(x.invert(e