d3.js

d3 multi line with mouse over cursor for both y AND x value

由 廉价感情. 提交于 2020-01-15 10:16:09
问题 For this working example (see Multiseries line chart with mouseover tooltip), I would need to display also the x axis value (and not only the y value) next to the circles. How can this be achieved? <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; }

D3js reset the origin of a drag behaviour

由 狂风中的少年 提交于 2020-01-15 08:42:10
问题 I am trying to reset the drag behavior of a svg group. My requirement is to move the group from where it was stopped last. Here is my work fiddle. can some on help me? <g id="a" transform="translate(0,0)"> <g> <rect x="10" y="10" width="200" height="200" fill="red"></rect> <circle r="5" cx="10" cy="105" fill="blue"></circle> <circle r="5" cx="210" cy="105" fill="blue"></circle> </g> <g id="b" class="e" transform="translate(0,0)"> <rect x="20" y="20" width="50" height="50" fill="black"></rect>

Updating Donut Graph Using d3.js

由 非 Y 不嫁゛ 提交于 2020-01-15 08:22:15
问题 I've been working for a few hours now and I can't get my donut graph drawn with d3.js to update to new data. My HTML is, <body> <div id="pie"></div> <script src="pie.js"></script> </body> And my JS is, var dataset = [40, 20]; var width = 460, height = 300, radius = Math.min(width, height) / 2; var color = ['#000000', '#FFFFFF']; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 +

Changing default chart axis thickness in Billboard.js / D3.js

由 纵然是瞬间 提交于 2020-01-15 06:32:08
问题 I've created a chart with Billboard.js (an interface chart library based on D3 v4+) . The problem I have is with the thickness of the axis which are made by default pretty thick, I couldn't find any method to make them slimmer. This is how my chart looks like: I managed to change their thickness when I right-clicked on them and opened in inspect, the element for the vertical axis is: <path class="domain" d="M-6,1H0V446H-6"></path> and for the horizontal axis it is: <path class="domain" d="M0

How to draw line automatically by reading coordinates from file?

由 两盒软妹~` 提交于 2020-01-15 06:14:54
问题 I am trying to draw line with arrow at one end. Also I need to do it automatically for multiple arrows in the same plot. d3.csv("/data/coordinates.csv").then(function(data) { d.x1= +d.x1; d.y1= +d.y1; d.x2= +d.x2; d.y2= +d.y2; }); so input will be like x1,y1,x2,y2 1,2,3,2 3,3,5,4 5,3,6,3 7,5,7,5 8,6,8,6 9,7,2,8 var xoneValue = function(d) { return d.x1;}, xoneMap = function(d) { return xoneValue(d);}; var yoneValue = function(d) { return d.y1;}, yoneMap = function(d) { return yoneValue(d);};

How to layer D3 Force Simulation nodes based on element and not node order?

由 家住魔仙堡 提交于 2020-01-15 06:05:10
问题 I have a a D3 v4 force simulation with nodes moving around the screen. Each node is a group consisting of a circle and some text below it. How do I order this so that the circles are on a bottom layer and the text on a top layer always. It's okay for a circle to overlap a circle, but it's never okay for a circle to overlap on top of text. Here is what I've got. Currently, the node's circle that is ahead of the other node will overlap that node's text. this.centerNode = this.d3Graph.selectAll

Adding new nodes to a clustered force layout

由 混江龙づ霸主 提交于 2020-01-15 05:35:55
问题 Using the Mike Bostock example for clustered nodes, I'm trying to create a way to push a new node to the flock. function addNode(){ nodes.push({ cluster: 2, radius: 5, x: Math.cos(3 / 4 * 2 * Math.PI) * 200 + width / 2 + Math.random(), y: Math.sin(5 / 4 * 2 * Math.PI) * 200 + height / 2 + Math.random() }); console.log(nodes); update(); } $('button').click(function(){ addNode(); }) I'm creating new nodes using the same values for cluster and radius but with random values for x & y. Here is the

Parsing specific columns/data from multiple CSV file

由 你离开我真会死。 提交于 2020-01-15 05:14:08
问题 So, just recently I have been using D3.js to parse data from a CSV file. While reading the "Interactive Data Visualization" by Scott Murray (great book and very informative) it explains how to select all data from a table in a CSV. The code to parse the CSV is shown below: d3.text("three.csv", function(data) { var parsedCSV = d3.csv.parseRows(data); var container = d3.select("#thirdCSV") .append("div") .append("table") .attr("id", "tableThree") .selectAll("tr") .data(parsedCSV).enter()

Access subkeys in multi-dimensional javascript object

由 冷暖自知 提交于 2020-01-15 04:19:26
问题 This is really a javascript question, as it involves iterating through the elements of a multidimensional js object and interpreting how to use the firefox console's representation of that object . Using d3.js/dc.js, I have two line charts. When the user clicks on a dot point in one chart, I need to identify the same point on its companion chart. Both charts use a similar X axis, a date series. The dates will correspond exactly, so the nth datapoint on chart 1 will correspond to the nth

How to show many links separate by value in D3.js forced directed graph

由 落爺英雄遲暮 提交于 2020-01-15 03:45:38
问题 It overlapping lines I try to show many links between nodes by multi array (Source,Target,Value) But It's not display.It overlapping lines. [My Example] http://bl.ocks.org/Lovekiizzk/90cbfb9d8ee7fe9baa26 See in the knet2.json. { "nodes":[ { "name":"Novak_Djokovic", "thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Flickr_-_Carine06_-_Novak_Djokovic_(4).jpg?width=300", "uri":"http:\/\/dbpedia.org\/resource\/Novak_Djokovic", "group":1}, { "name":"Rafael_Nadal", "thumbnail":
订阅 d3.js