d3.js

D3 example from Observable on my wordpress site

蓝咒 提交于 2020-06-01 05:53:05
问题 Thank you very much for the help in advance. I am trying to add this Sankey Diagram on my wordpress site. https://observablehq.com/@d3/sankey-diagram I am having a hard time. I downloaded the JS code, pasted it on my wordpress site, but it gives me a lot of errors Uncaught SyntaxError: Unexpected token 'export' Is the first error from the browser. This is the code I downloaded below: <script src="https://d3js.org/d3.v5.js"></script> <script> // https://observablehq.com/@d3/sankey-diagram@273

How to make a D3 Line Chart Responsive

℡╲_俬逩灬. 提交于 2020-05-31 11:50:42
问题 I am new to using D3 charts and am having an issue making my multi line chart responsive. I have reviewed some examples on how to make D3 responsive, but I can not make it work on my graph. If someone could assist me in making the code I currently have responsive I would really appreciate it. Here is the code: // Set the dimensions of the canvas / graph var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 600 - margin.left - margin.right, height = 400 - margin.top - margin.bottom;

Bar chart: set axis domain from csv without header

谁都会走 提交于 2020-05-30 07:20:49
问题 I have the following code for a d3 bar chart from csv with header. I have removed code to mention only the relevant parts. I am using d3 v5. data.csv: Plan, TotalTime, Time1, Time2 A, 0.07, 0.04, 0.03 B, 0.08, 0.02, 0.06 index.js d3.csv("data.csv", d3.autoType).then(function(data) { x.domain(data.map(function(d) { return d.Plan; })); y.domain([0, d3.max(data, function(d) { return d.TotalTime; })]); g.selectAll(.bar) .data(data) .enter().append("rect") .attr("class", "TotalBar") .attr("x",

Uncaught TypeError: d3.csv(…).then is not a function

微笑、不失礼 提交于 2020-05-30 06:30:05
问题 var allData; d3.csv('hello.csv', function(d) { return { id: +d.id, state: d.state }; }).then(function(data) { allData = data; }); Above code is causing an error Uncaught TypeError: d3.csv(...).then is not a function I don't know what is wrong. 来源: https://stackoverflow.com/questions/60625450/uncaught-typeerror-d3-csv-then-is-not-a-function

What happened to d3.interpolateGnBu

荒凉一梦 提交于 2020-05-30 03:24:27
问题 So I am trying to make a continuous color scale using the GnBu color scheme. d3.scaleSequential(d3.interpolateGnBu).domain([0, 1]) this works with d3.scaleSequential(d3.interpolateViridis).domain([0, 1]) so why doesn't GnBu work anymore? It exists: https://apimirror.com/d3~4/d3-scale-chromatic#interpolateBuGn 回答1: This scheme is no longer part of the d3 core bundle. As part of the modular approach to d3 v4, these color brewer based schemes are now based in d3-scale-chromatic. So you'll need

What happened to d3.interpolateGnBu

荒凉一梦 提交于 2020-05-30 03:23:24
问题 So I am trying to make a continuous color scale using the GnBu color scheme. d3.scaleSequential(d3.interpolateGnBu).domain([0, 1]) this works with d3.scaleSequential(d3.interpolateViridis).domain([0, 1]) so why doesn't GnBu work anymore? It exists: https://apimirror.com/d3~4/d3-scale-chromatic#interpolateBuGn 回答1: This scheme is no longer part of the d3 core bundle. As part of the modular approach to d3 v4, these color brewer based schemes are now based in d3-scale-chromatic. So you'll need

What happened to d3.interpolateGnBu

早过忘川 提交于 2020-05-30 03:21:09
问题 So I am trying to make a continuous color scale using the GnBu color scheme. d3.scaleSequential(d3.interpolateGnBu).domain([0, 1]) this works with d3.scaleSequential(d3.interpolateViridis).domain([0, 1]) so why doesn't GnBu work anymore? It exists: https://apimirror.com/d3~4/d3-scale-chromatic#interpolateBuGn 回答1: This scheme is no longer part of the d3 core bundle. As part of the modular approach to d3 v4, these color brewer based schemes are now based in d3-scale-chromatic. So you'll need

Property getBBox does not exist on type SVGElement

喜夏-厌秋 提交于 2020-05-29 10:22:51
问题 I'm using d3, and I'd like to use the getBBox method that SVG elements have. I'm using the following: (d3Selection.node() as SVGElement).getBBox() , however the TypeScript fails to compile due to the error in the title. Is SVGElement the wrong type to use? I can it working using any instead, but this seems like a bit of an "unclean" solution. 回答1: Not all SVG elements have bounding boxes, <defs> for instance doesn't, neither does <title> , so yes SVGElement is the wrong type to use. You want

2 arrays one of values one of colors make D3 bar chart have color at same index of value

帅比萌擦擦* 提交于 2020-05-29 10:07:46
问题 I have 2 arrays: values = [1,2,3,4,5,4,7,2,9,10]; colors = ['red','red','blue','blue','green','green','orange','orange','pink','pink']; I am trying to build a D3 Bar chart where each bar has height of 10 times the value and corresponds to the color that has the same index as the value. This is what I have so far: d3.select("body").selectAll("div") .data(total_data) .enter() .append("div") .attr("class", "bar") .style("fill", function(d) { return colors[values.indexOf(d)]; }) However, say we

How can I fill gaps in a dc.js series chart?

ぃ、小莉子 提交于 2020-05-28 07:34:49
问题 I have the following dc.js series chart: var data = [ {day: 1, service: 'ABC', count: 100}, {day: 2, service: 'ABC', count: 80}, {day: 4, service: 'ABC', count: 10}, {day: 7, service: 'XYZ', count: 380}, {day: 8, service: 'XYZ', count: 400} ]; var ndx = crossfilter(data); var dim = ndx.dimension(function (d) { return [d.service, d.day]; }); var grp = dim.group().reduceSum(function(d) { return +d.count; }); var chart = dc.seriesChart('#graph') .width(620) .height(175) .chart(function(c) {