d3.js

问题 I have the following query working OK: SELECT core_condition AS name, NULL AS parent FROM condition_theme_lookup UNION ALL SELECT theme_name AS name, condition_theme_lookup.core_condition AS parent FROM theme, condition_theme_lookup UNION ALL SELECT strand.strand_name AS name, theme.theme_name AS parent FROM strand JOIN theme ON theme.theme_pk = strand.theme_fk The resulting array, with some PHP, produces the following JSON, which is fine so far, showing the 'strand' children of 'theme'

问题 i have chart like this I need to fill 3 area between dashed line. for example : fill area between 2 red dashed line, 2 blue dashed line and 2 green dashed line. I try do it like this: function fillArea(){ var d = {}; var x = []; var y1 = []; var y0 = []; for(var i = 0; i < chartJson.length; i++){ x.push(chartJson[i].run_date); y0.push(chartJson[i].diviationMinus); y1.push(chartJson[i].diviationPlus); } d.x = x; d.y1 = y1; d.y0 = y0; var area = d3.svg.area() .x(function(d) {return x(d.x); })

问题 I have a json object which has multiple key and data inside, current code only takes first key object and draws it. I want each key to create a element, currently only takes first key and draws it. Each key object element will be created dynamically. Please help with this Json data which holds two objects and will increase as I keep adding dynamically: var processMain = { "process": [{ "ProcessName" : "Record One", "Username" : "Joh Doe", "Created" : "10:00:00", 'records': [ "Titles goes here

问题 I'm trying to load data from a CSV file in D3; I have this code: function update (error, data) { if (error !== null) { alert ("Couldn't load the dataset!"); } else { //do something }; function changeData () { d3.csv ("data/dataset.csv", update); } If I use D3 v4 it works fine, but if I switch to v5 it doesn't work anymore. Can someone explain to me how to modify the code to make it work with D3 v5? 回答1: d3 v5 uses the fetch API and returns a promise requiring the below code. d3.csv('yourcsv

问题 I am trying to toggle data points in my line chart when the legend is clicked. Here is the link to my fiddle. From my fiddle, when the legend is clicked, the lines and the corresponding axis will be toggled on and off but the points do not. The relevant code is as follows. //************* Lines and Data Points *************** var colors = ["blue", "red"]; var thisScale; var line = d3.line() .x(d => x(d.x)) .y(d => thisScale(d.y)) .curve(d3.curveLinear); var paths = g.selectAll("foo") .data

问题 Who is able to explain me this code: var hue = d3.scale.category10(); var luminance = d3.scale.sqrt() .domain([0, 1e6]) .clamp(true) .range([90, 20]); It's for L*a*b notation color Can someone explain me step by step with example please this part of code? Because I have percent value and I'm thinking the domain or range are not for percent value in luminance function for this luminance(d.sum); I have always this value for luminance: 89.9999951176645 Is that the problem because my d.sum are

问题 I want to set a timeout value so that if the server does not respond in that particular time frame then UI should move ahead and not wait for response. I have used the below syntax so far but the UI gets hanged waiting for response. How can I specify a callback to reset the values and inform UI that no longer needed to wait. q.promise(function(resolve, reject) { d3.xhr(my_url) .header('Content-Type', 'text/xml') .timeout(2000) .send(this.my_method, my_xmlData, function(error, data) { }) }); I

问题 I have a very sparse dataset and I want to plot it in a histogram with a logarithmic scale. I would like the X axis to look something similar to: [1, 10, 100, 1000, 10000] Meaning that the first bin would include the observations with a cost of 1-10, the second 11-10 and so on, and the last would be +10.000. function (pow, min, max) { var range = []; for (i = min; i < max; i++) { range.push(Math.pow(pow, i)); } return range; } I am able to generate the given array of powers of 10. Now, what I

问题 I have this graph : http://jsfiddle.net/thatOneGuy/Rt65L/94/ I can't seem to figure out how to get the same scale in both x and y. What I need is the same distance between the ticks on both but I need the x axis to be 600px long and y axis to be 300px high. I have tried calling the same scale but obviously the x scale is too big for the y. Any ideas ? <svg id='svgContainer' width="1000" height="700"> </svg> var container = d3.select('#svgContainer') .style('stroke', 'red') var width = 600,

问题 Can anyone point me to even the simplest example of how to embed d3.js graphics into ext.js? I've done a lot of searching: I'm not even sure it's possible. Or is it? Thanks in advance. 回答1: An overly simplified version of what I have used with OK results so far: Ext.define('desktop.controls.d3svg', { extend: 'Ext.container.Container', alias: 'widget.d3svg', listeners: { added: function() { this.onAdded(); } }, onAdded: function() { // ext container has the outer and inner containers // use id