d3.js

问题 I want to plot histogram using csv data using d3.js. I'm referring this link. In that tutorial they are using local file csv data but in my application data comes from the web-socket so, I'm thinking that I can collect this data and create one string as a csv data and pass this string to the d3.csv or d3.csv.parse function. meanwhile, I'm getting stuck at one point because my data is not properly populating over web-page. Web-socket server is sending this file data line by line : date,bucket

问题 I am learning topojson with d3. I have coordinate information for land, which is rendered correctly. Then, how can I add color to ocean (basically outside land)? I tried coloring graticule, but doesn't fill up the entire map and leaves empty spots. The visualization is hosted on http://jbk1109.github.io/ var projection = d3.geo.stereographic() .scale(245) .translate([width / 2, height / 2]) .rotate([-20, 0]) .clipAngle(180 - 1e-4) .clipExtent([[0, 0], [width, height]]) .precision(.1); var

问题 I am learning topojson with d3. I have coordinate information for land, which is rendered correctly. Then, how can I add color to ocean (basically outside land)? I tried coloring graticule, but doesn't fill up the entire map and leaves empty spots. The visualization is hosted on http://jbk1109.github.io/ var projection = d3.geo.stereographic() .scale(245) .translate([width / 2, height / 2]) .rotate([-20, 0]) .clipAngle(180 - 1e-4) .clipExtent([[0, 0], [width, height]]) .precision(.1); var

问题 I am trying to get a pie chart example to work whereby the position of the chart is centre aligned inside it's containing element, just a simple div in this case set to use 100% width available. See this fiddle As you can see the centre of the chart is positioned in the top left corner of the div, rather than using the centre point of the available width and height as per the transform attribute I am setting: .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); I am

问题 I need some help with d3 and MySQL. Below is my question: I have data stored in MySQL (eg: keywords with their frequencies). I now want to visualize it using d3. As far as my knowledge of d3 goes, it requires json file as input. My question is: How do I access this MySQL database from d3 script? One way which i could think of is: Using Python, connect with database and convert the data in json format. Save this in some .json file. In d3, read this json file as input and use it in

问题 I'm trying to place a force layout node system on a map. SOME of the nodes have lon and lat values in the json file I'm using. Other nodes only need to be connected but not georeferenced. I would like to place in position the nodes which have lon and lat values and the others simply to be connected. (I found this example which I followed but the nodes without lon and lat values are placed outside the svg: https://bl.ocks.org/cmgiven/4cfa1a95f9b952622280a90138842b79) I also tried to filter the

问题 I am trying to understand the D3.js code for this example and am confused by this code: var circle = interpolation.selectAll("circle") .data(Object); circle.enter().append("circle") .attr("r", 4) .attr("fill","yellow"); circle .attr("cx", function y(d) { console.log(d.attr("class")); return d.x; }) .attr("cy", function(d) { return d.y; }); What does the second line of this code actually do? What data does it bind to? 回答1: The data bound in the element above that is given by the function

问题 Based on d3 (ver 1.4) documentation https://github.com/d3/d3-geo/blob/master/README.md#geoProjection , the d3 projection should be set to null to use the data's raw coordinates. How do I scale if the projection looks correct using null? Here is the code: var path = d3.geoPath() .projection(null) .context(context); bands.features.forEach(function(d, i) { context.beginPath(); context.fillStyle = colors[i]; context.globalAlpha = .5; path(d); context.fill(); }); I have tried defining my own

问题 I have been lookig around for a way to download the generated svg from d3.js and I either end up with phantom.js which seems kinda overkill (or at least intimidating given the "simplicity" of the problem) or svg-crowbar.js which is apparently only for chrome (I need firefox). I also found the following code: //Encode the SVG var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(d3.select('svg').node()); var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);

问题 I tried adding leaflet marker to d3'js map.Unfortunately the marker doesn't show. Is it possible to mix these two scripts? Here's my code: <!DOCTYPE html> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="d3map.css" /> <link rel="stylesheet" href="leaflet.css"/> <script src="leaflet.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/d3.geo.projection.v0.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script src