d3.js

D3 - Removing elements (div) on update

由 大兔子大兔子 提交于 2020-06-17 13:07:07
问题 I currently have a chart with 2 viewing options (regular data and percentages). I also have a tooltip that shows the results for each line that I'm showing When I switch options I want my tooltip to keep showing the info (the lines are getting drawn correctly) but instead what I'm seeing is that I'm creating several tooltip boxes for each time I switch options. My tooltip is an append('g') to my main chart and I'm appending my tooltip box to this tooltip which is appended to my chart which is

d3v4 hybrid dougnut and bubble chart — but the bubbles aren't working?

由 独自空忆成欢 提交于 2020-06-13 11:47:57
问题 I'm trying to convert and old d3v3 hybrid chart -- but the bubble chart elements are not working? d3v3 - https://jsfiddle.net/jfxoy7wr/ d3v4 example v4 https://jsfiddle.net/30odhpft/ this bubble chart code - is currently commented out - it was reporting an error loading in the d3.pack()? var bubble = d3.pack() .size([diameter, diameter]) .value(function(d) { return d.value; }) .padding(3); //_create bubble var data = bubbledata(data); var node = svg.selectAll(".node") .data(bubble(nodes)

d3v4 hybrid dougnut and bubble chart — but the bubbles aren't working?

由 我的未来我决定 提交于 2020-06-13 11:46:20
问题 I'm trying to convert and old d3v3 hybrid chart -- but the bubble chart elements are not working? d3v3 - https://jsfiddle.net/jfxoy7wr/ d3v4 example v4 https://jsfiddle.net/30odhpft/ this bubble chart code - is currently commented out - it was reporting an error loading in the d3.pack()? var bubble = d3.pack() .size([diameter, diameter]) .value(function(d) { return d.value; }) .padding(3); //_create bubble var data = bubbledata(data); var node = svg.selectAll(".node") .data(bubble(nodes)

How to change the distance between nodes in a force layout?

由 ↘锁芯ラ 提交于 2020-06-13 06:20:08
问题 I am new to D3 and try to learn force layout. I want to change the link distance between nodes and maintain the origin shape. I find that after I change the distance of the links, the layout was changed. Figure one is the original layout, then I changed the link distance with code distance([150]) (at line 80) to make the nodes further, but the layout changes out of my expectation. I expected it the layout will grow up with keeping the shape as same as original, but the layout changes a lot. I

d3v4 bubble chart update

由 混江龙づ霸主 提交于 2020-06-11 07:03:32
问题 The bounty expires in 6 days . Answers to this question are eligible for a +200 reputation bounty. The Old County is looking for a canonical answer : bubbles grow in size now -- but force aspects are not working - jsfiddle.net/vkoxrtwz - need to give the bubbles some force aspects - and if clicked on temporarily change their charge so it ripples through the chart and causes the circles to repel/attract each other slightly I've got an old d3v3 bubble chart -- it had some animation aspects -- I

d3v4 bubble chart update

由 依然范特西╮ 提交于 2020-06-11 07:03:29
问题 The bounty expires in 6 days . Answers to this question are eligible for a +200 reputation bounty. The Old County is looking for a canonical answer : bubbles grow in size now -- but force aspects are not working - jsfiddle.net/vkoxrtwz - need to give the bubbles some force aspects - and if clicked on temporarily change their charge so it ripples through the chart and causes the circles to repel/attract each other slightly I've got an old d3v3 bubble chart -- it had some animation aspects -- I

jquery .ready() equivalent in d3js?

由 霸气de小男生 提交于 2020-06-10 08:44:29
问题 currently i am adding all javascript at HTML <head> after uglying as file & using these jquery functions to check document ready $( document ).ready(function() {}); OR $(function() {}); is there any d3js equivalent to remove using of these jquery functions ? 回答1: A You can simply put the <script> tag at the bottom of the body tag. B you can add the DOMContentLoaded event and insert your d3js code inside. document.addEventListener("DOMContentLoaded", function(e) { /* Your D3.js here */ });

jquery .ready() equivalent in d3js?

由 纵饮孤独 提交于 2020-06-10 08:43:48
问题 currently i am adding all javascript at HTML <head> after uglying as file & using these jquery functions to check document ready $( document ).ready(function() {}); OR $(function() {}); is there any d3js equivalent to remove using of these jquery functions ? 回答1: A You can simply put the <script> tag at the bottom of the body tag. B you can add the DOMContentLoaded event and insert your d3js code inside. document.addEventListener("DOMContentLoaded", function(e) { /* Your D3.js here */ });

Zigzag border and fill color

由 浪子不回头ぞ 提交于 2020-06-09 05:31:28
问题 I have a zigzag path, I rotated it to make a zigzag border like this. Because of using Rotate, each zigzag line is in a different path attribute so I can`t fill in the color. How can I fill in the color insde these pathes using d3.js <svg height="2100" width="4000"> <path d="M150 250 L190 260 L230 240 L270 260 L310 240 L350 260 L390 240" stroke="red" stroke-width="2" fill = "none"/> <path d="M150 250 L190 260 L230 240 L270 260 L310 240 L350 260 L390 240" stroke="red" stroke-width="2" fill =

D3 y-axis percent display

由 隐身守侯 提交于 2020-06-09 05:10:20
问题 D3 Fiddle /** * A bar chart. Required data format: * [ { name : x-axis-bar-label, value : N }, ...] * * Sample use: * var bargraph = d3.select('#bargraph') * .append('svg') * .chart('BarChart') * .yFormat(d3.format("d")) * .height(400) * .width(800) * .max(1.0); * bargraph.draw(bardata); */ d3.chart('BarChart', { initialize: function() { var chart = this; // chart margins to account for labels. // we may want to have setters for this. // not sure how necessary that is tbh. chart.margins = {
订阅 d3.js