d3.js

D3 zoomable sunburst not zooming (with data from R)

由 偶尔善良 提交于 2020-01-07 04:41:27
问题 I'm trying to adapt some code so I can plot data in a sunburst (using D3) chart with data coming from R as a dataframe. I've got most of it working ok except the zooming part, when i click (almost) nothing happens. On mouseOver I've got a portion of circle with a greater radius than the one for the sunburst to help emphasizing the data I'm hovering. This explains the arcHighlight variable. Also one can notice it is not constructed using my scales a and b . I modifed the original code to use

d3 donut chart not visible entirely when in mobile view

由 荒凉一梦 提交于 2020-01-07 03:52:11
问题 I am showing up some data using d3 donut chart as shown below, however when I switch to mobile view, chart is not visible properly how can I make it work or make it show entire donut and details in mobile view ? var width = $(".chart-time-spent").width(), height = 250, radius = Math.min(width, height) / 2, legendPosY = (height / 2) - 20; var color = d3.scale.ordinal().range(["#99ecf0", "#1cb5bb", "#10538c", "#75c6f3", "#60d3ff", "#4ec3d7", "#37c2a5", "#8bcb6b"]); var API = apiUrl+

d3-tip doesn't work in a multiline chart

由 ぐ巨炮叔叔 提交于 2020-01-07 03:48:06
问题 I am just learning how to use d3-tip in a multiline chart. I took this example for practising: http://bl.ocks.org/d3noob/d8be922a10cb0b148cd5 I've added d3-tip to the code but the tooltip doesn't appear . The chart is displayed correctly , but when I check the console: "Uncaught TypeError: Cannot read property 'value' of undefined" pointing to this code line: .html(function(d) { return "<b>" + d.value + "</b>"; }) Here I show you the script: <script src="d3/d3.min.js" charset="utf-8"></script

d3 Cumulative Line Chart

由 若如初见. 提交于 2020-01-07 03:45:10
问题 I am new to d3 charts and i want to create d3 Cumulative Line Chart with date on x-axis,some values on y-axis and x & y axis's values should appear on tooltip. Here below is my sample code and sharing a screen shot for better understand my requirements: [index.html file] <!DOCTYPE html> <meta charset="utf-8"> <style> /* set the CSS */ /*body { font: 12px Arial;} path { `enter code here` stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke

Creating a rectangle chart with D3.js

由 ぃ、小莉子 提交于 2020-01-07 03:41:24
问题 I am trying to make a d3 javascript that creates a rectangle whose color depends on a data set. All of the rectangles are adjacent to each other like: [][][][][][] [][][][][][] I got my script to work to create rectangles for all of my data, but it overflows like: [][][][][][][][][][][][][][][][][][][][][][][][][][][] How can I create width and height properties for my d3 script so it looks more like [][][][] [][][][] [][][][] Here is my script: <script> //for whatever data set var data = [];

Getting d3.events as null in angular2 typescript code

由 拜拜、爱过 提交于 2020-01-07 03:22:11
问题 I am implementing tooltip in my d3 maps using the code from link http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 When I write the same code in my angular 2 typescript file. I get error: Cannot read property 'transition' of undefined it is basically not able to find d3.event (getting it as null) which does not happen in javascript code. My code in ngAfterViewInit ngAfterViewInit() { this.tooltip = d3.select("map-tag") .append("div") .attr("class", "tooltip") .style("opacity", 0); this

Getting d3.events as null in angular2 typescript code

由 ﹥＞﹥吖頭↗ 提交于 2020-01-07 03:22:06
问题 I am implementing tooltip in my d3 maps using the code from link http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 When I write the same code in my angular 2 typescript file. I get error: Cannot read property 'transition' of undefined it is basically not able to find d3.event (getting it as null) which does not happen in javascript code. My code in ngAfterViewInit ngAfterViewInit() { this.tooltip = d3.select("map-tag") .append("div") .attr("class", "tooltip") .style("opacity", 0); this

c3.js how to set json datas in x/y Axis

由 独自空忆成欢 提交于 2020-01-07 03:16:14
问题 I use c3 to create simple graphs. I want to get datas from a Json file and fill it to create my Line-Graph. My Y Values should be ("Labels") and my X Values should be ("Datas"). So this is, how my Code looks like: var chart = c3.generate({ bindto: '#chart', data: { xFormat: '%Y-%m-%dT%H:%M:%S', json: { times:datas, data: labels } } }); My "datas" (Array) are: "2014-01-01T10:10:10" "2014-02-01T10:10:10" "2014-03-01T10:10:10" "2014-04-01T10:10:10" "2014-05-01T10:10:10" ... And my labels : 1234

JavaScript callback function seems to work, but does not draw the data

由 安稳与你 提交于 2020-01-07 03:10:53
问题 I've already been through many tutorials on callbacks (e.g. here, on SO and this gem) By far the best one was this gem. Especially this part helped me to understand. function addOne(thenRunThisFunction) { waitAMinuteAsync(function waitedAMinute() { thenRunThisFunction() }) } addOne(function thisGetsRunAfterAddOneFinishes() {}) So I implemented it as described there. Now everything seems to work on console output, but it does not render my d3 force directed graph as expected. [some fancy

dc.js brush not aligned with cursor

由 心不动则不痛 提交于 2020-01-07 03:08:09
问题 I have a number of dc bar charts that get added to a page. For some reason, when I brush a selection on the chart, the selected area starts a good bit to the left of the cursor. For example in this case the cursor was around 12 on the x axis, but the brush selection started around 4. In most cases the cursor starts before the x axis with no data selected. This is pretty much the code used for the chart. I can't really see anything that would be causing this issue. I'm working with version dc
订阅 d3.js