d3.js

D3.js Tree Expand All and Collapse All

由 ↘锁芯ラ 提交于 2019-12-30 06:08:41
问题 I'm building a Tree using D3.js and what I am trying to do is add two buttons, Expand All and Collapse All to the top of the page like this. When I click "Expand All", all the nodes should expand. And when I click "Collapse All", all the nodes should collapse to the root element. Here's my current code http://bl.ocks.org/anonymous/ab8d7f85cca6f745a107 But the problem is, it isn't working. Can somebody suggest how to make it work? 回答1: Try this code. Here is the working JsFiddle. function

D3.js Tree Expand All and Collapse All

由 心已入冬 提交于 2019-12-30 06:08:31
问题 I'm building a Tree using D3.js and what I am trying to do is add two buttons, Expand All and Collapse All to the top of the page like this. When I click "Expand All", all the nodes should expand. And when I click "Collapse All", all the nodes should collapse to the root element. Here's my current code http://bl.ocks.org/anonymous/ab8d7f85cca6f745a107 But the problem is, it isn't working. Can somebody suggest how to make it work? 回答1: Try this code. Here is the working JsFiddle. function

D3.js Chart: Labels (<text> Tags) Not Showing On IE11

由 二次信任 提交于 2019-12-30 05:46:08
问题 I have a stacked bar chart whose <text> labels will not show on IE, but will on Chrome and Firefox. The labels I have on the stacked bar charts are part of the axes and the legend. This is how it looks like when the page loads. The chart's text actually does load, but only after I interact with it. If I do any of the following... click/right-click anywhere on the chart hover over a bar (which triggers a tooltip I've set up to appear) resize the window ... the chart's labels on both the legend

D3js: Dragging a group by using one of it's children

由 懵懂的女人 提交于 2019-12-30 04:46:05
问题 Jsfiddle: http://jsfiddle.net/6NBy2/ Code: var in_editor_drag = d3.behavior.drag() .origin(function() { var g = this.parentNode; return {x: d3.transform(g.getAttribute("transform")).translate[0], y: d3.transform(g.getAttribute("transform")).translate[1]}; }) .on("drag", function(d,i) { g = this.parentNode; translate = d3.transform(g.getAttribute("transform")).translate; x = d3.event.dx + translate[0], y = d3.event.dy + translate[1]; d3.select(g).attr("transform", "translate(" + x + "," + y +

Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js

由 亡梦爱人 提交于 2019-12-30 04:31:08
问题 I'm building a bar chart in d3.js with an ordinal x-axis whose ticks should label the chart with text. Could anyone explain how the ordinal scale "maps" x ticks to the corresponding bar positions? Specifically, if I want to designate the x tick labels with an array of text values to the corresponding bars in a bar chart. Currently I'm setting the domain as the following: var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]; var xScale = d3.scale

Combining translate and rotate with D3

由 筅森魡賤 提交于 2019-12-30 04:00:08
问题 Quite possibly this repeats some of this SO question, but the code is overly-complicated and the OP hasn't added solution code. And this related question is no longer replicable. I'm trying to figure out how to combine rotations and translations in the right order. It's possible to rotate around the origin as in this example. But when we follow this with a translation the original rotation is undone. Is it possible to structure this for correct sequential application? jsfidle code: HTML:

Preventing Text-Clipping in D3 (Javascript Charting)

由 女生的网名这么多〃 提交于 2019-12-30 03:35:07
问题 I'm drawing a pie chart in D3, but having trouble with the text clipping itself: Here's my draw function: pie: function(config) { var width = config.width || 840, height = config.height || 520, radius = Math.min(width, height) / 2; var color = this._color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0); var pie = d3.layout.pie().sort(null).value(function(d) { return d

I want to add text on the link in D3.js tree graph

由 Deadly 提交于 2019-12-30 03:32:05
问题 I want to make a decision tree in D3.js and to add text on the link. <!DOCTYPE html> <meta charset="utf-8"> <body><script src="../d3-master/d3.min.js"></script> <head><link rel="stylesheet" type="text/css" href="../D3css/D3css.css"></head> <script> var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, rect_width = 90, rect_height = 20; var tree = d3.layout.tree() .size([height * 2, width / 2]); var

Resizing d3 / dagre-d3 svg to show all contents

由 徘徊边缘 提交于 2019-12-30 03:18:07
问题 I'm trying to create DAGs with dagre-d3. The data for these DAGs comes from a database, are different for each DAG and as such, I do not know the width/height to give the containing svg before adding all nodes and edges to the graph. So ideally I'd call something like d3.select("#svg1").resize_to_match_contents() after adding all nodes and edges to make sure all nodes are visible and the svg isn't too large. Of course there is no such function, and I have no idea how to implement it. I know I

d3.js Odd Rotation Behavior

由 时光总嘲笑我的痴心妄想 提交于 2019-12-30 03:13:11
问题 I'm in the early stages of a JS project. Everything is going fine so far except for the positioning of one shape. The shape in question is a teal diamond (square rotated 45 degrees). I can get the square on the screen no problem, but when I add: .attr("transform", "rotate(45)") the square rotates properly, but shifts towards the left portion of the screen, like this: I am not sure what is causing this to happen. If it helps, here is some of the code that produced this result: var svg = d3
订阅 d3.js