d3.js

How to align two svg's side by side in d3.js

由 社会主义新天地 提交于 2020-01-01 12:08:32
问题 I have two graphs(rectangles with text the other circles with text) to be displayed but instead of displaying one below the other,I want to display side by side i.e 2 charts displaying horizontally(one at the left of div and the other at right of div). I created 2 svg's and added the charts in to that. However when ever i change the top or bottom margin it is not working. My code goes like: <!DOCTYPE html> <html xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <meta http-equiv="Content-Type

Origin null is not allowed by Access-Control-Allow-Origin.

由 南笙酒味 提交于 2020-01-01 10:52:37
问题 When I am running the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Demo: GeoJSON</title> <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script> <style type="text/css"> /* No style rules here yet */ </style> </head> <body> <script type="text/javascript"> //Width and height var w = 500; var h = 300; //Define default path generator var path = d3.geo.path(); //Create SVG element var svg = d3.select("body") .append("svg")

geochart in d3.js

由 偶尔善良 提交于 2020-01-01 09:40:39
问题 I'm looking for some guidance or an example how to do a geochart in d3.js. I need something like this one in google charts, and turning to d3.js since I need some customization. So far the closest d3.js sample I found is this but the code is very long there and I am hoping to find something simpler. 回答1: Are you looking for a choropleth map? Here's a recent example in 28 lines of code. This example uses the default projection, d3.geo.albersUsa, which is a composite projection for the United

D3.js Adding links between elements in a radial tree (Hierarchical edge bundling elements)

由 自作多情 提交于 2020-01-01 08:54:09
问题 A couple of months ago, I tried combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree using d3.js I started from the HEB and tried to make it into a tree. Things have not worked out the way I wanted, and I realized it might be better to start from a collapsible radial tree (not Reingold Tilford), with a different angle. Here is a JSFiddle of the radial tree The data model has also changed, as elements now have a name, children and imports (links). var flare = { "name": "root",

Error: <rect> attribute width: Expected length, “NaN”. and <text> attribute dx: Expected length, “NaN”

由 僤鯓⒐⒋嵵緔 提交于 2020-01-01 08:28:09
问题 I want to implement a bar chart in D3, but my values on the dx axis are of type Date, data type which the D3 library should accept, but it seems to give me an error like this: attribute width: Expected length, "NaN". This is my code: <html> <head> <meta charset="utf-8"> <title>a bar graph</title> </head> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .MyRect { fill: steelblue; } .MyText { fill:

Plotly.js: How to avoid overlapping contour lines?

由 余生颓废 提交于 2020-01-01 07:23:05
问题 Below is an example for creating a contour plot with plotly.js. Some of the contour lines overlap . How can I alter the plotly settings to avoid that (e.g. increase resolution , switch contouring algorithm )? If I plot the same data using conrec.js the contours do not overlap. A. Conrec.js (this works, no overlap) Source code for the example: https://github.com/jasondavies/conrec.js/tree/master/example B. Plotly.js (does not work: overlapping contours) Source code for the example: https:/

How to create d3 graph using data from Rails database

由 。_饼干妹妹 提交于 2020-01-01 07:06:13
问题 I learned to create d3 graph using the d3 book, in which all the dataset is included directly in the <script> tag, which is in turn included in the html body. I now want to use d3 in my rails app, but I don't know how to: Pass data from my Rails database to my d3 script How to "partial out" the javascript? I have seen materials on "unobstrusive javascript", but they are usually about AJAX form submission and I have a hard time converting that to graph drawing (i.e. including a <div> with

D3: How to use exit().remove() for Multi-Series Line Chart

由 北城以北 提交于 2020-01-01 06:56:30
问题 For the Multi-Series Line Chart of d3 ( d3.v4.js ): https://bl.ocks.org/mbostock/3884955 how has the exit().remove() functionality to be applied, if I want to redraw the chart with different input data? function myGraphic(myData) { var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + ","

Trying to load simple CSV file into D3 with queue.js

由 耗尽温柔 提交于 2020-01-01 06:39:09
问题 I'm a newbie to web dev, and am trying to figure out how to load CSV data into D3.js, using queue.js to ensure that data is fully loaded before I execute the next step of the code (which will be drawing a chart with the data). I have googled this endlessly, but can't seem to wrap my head around how queue.js works. I have the following code, and can't understand why it isn't working. //Create a queue. First load CSV data, then run a function on the data once fully loaded. queue() .defer(d3.csv

Bundle layout using d3.js and given json file structure

由 淺唱寂寞╮ 提交于 2020-01-01 05:42:09
问题 I have a json file with elements like this: [{ "name": "Manuel Jose", "ttags": ["vivant", "designer", "artista", "empreendedor"] }] I'm trying to get the node and the edges using this structure to complete a graph like: (diagram is taken from d3.js documentation) Both name and ttags in my json file refer to nodes, ttags are actually links between the node and another nodes. But, I cannot understand how to create this diagram using this library d3 and above json file. d3.json("/data/tedxufrj
订阅 d3.js