Questions tagged [d3.js]

13453 questions
1

votes
1

answer
896

Views

Argument of type 'string[]' is not assignable to parameter of type 'ReadonlyArray<number>'

I am trying to learn d3.js from this tutorial I draw figures using d3.js in angular but I am getting stuck here. can anyone please tell me how can I solve this error. I am having only one method drawSvg() and I am getting an error which is Argument of type 'string[]' is not assignable to parameter...
Humble Dolt
1

votes
2

answer
246

Views

Can't import d3-queue in React.js? Attempted import error: 'queue' is not exported from 'd3' (imported as 'd3')

Trying to get an example working from https://bl.ocks.org/mbostock/4657115 with React.js. I get the error: Attempted import error: 'queue' is not exported from 'd3' (imported as 'd3'). However after installing d3-queue I tried the following imports in my component: import * as d3queue from 'd3-queue...
railsRabbit
1

votes
2

answer
31

Views

How do I use mouseover for an element hidden behind an invisible element?

I have a button that is a rectangle and text and an invisible rectangle on top. The invisible rectangle helps make sure that a user can click anywhere on the button, including over the word PLAY. The invisible rectangle is preventing my .on('mouseover') effect from working, which changes the color o...
Cauder
0

votes
0

answer
9

Views

How to trigger Angular click event on D3 Tree node contents?

The (click) event of Angular is not working on the HTML element inside a D3 Tree node. I am using '.append('xhtml').html' to add HTML to the D3 Tree node. Only the native inline javascript function is working. As a result, I am not able to send the click information to another component. The code f...
Sathyapriyan C
1

votes
2

answer
932

Views

d3 re rendering chart exit is not a function

I am trying to make sure that i can update my charts data with D3 for this i have the following function: fetchData(scope.filters.title_id, scope.filters.competence_id, scope.filters.from, scope.filters.to).then(function (data) { color.domain(d3.keys(data[0]).filter(function (key) { return key !== '...
Marc Rasmussen
1

votes
1

answer
435

Views

How can I bind an array of objects to arcs in a D3 pie chart?

I'm building a pie chart and my data is in the form of a JSON: [ { 'Stage':'birth', 'Avg':19071 }, { // } ] I don't know how I should use the data function to bind that json data to my selection. So this is not working for me: pie = d3.layout.pie(); arcs = svg.selectAll('g.arc') .data(pie(data)...
Benjamin
1

votes
1

answer
2.1k

Views

How to remove d3.behavior.drag().on(“drag”,…) event handler [duplicate]

This question already has an answer here: D3.js: Remove force.drag from a selection 3 answers I have the following attached to a svg element var dragger = d3.behavior.drag() .origin(function(d) { return d; }) .on('drag', this.move) .on('dragend', dropHandler); //caller var g = c.append('svg').call(...
Arihant
1

votes
1

answer
353

Views

Get id of dragged element in d3.js

I am probably having some kind of a brain damage atm, because something like this should be trivial. I got bunch of svg circles rendered manually (via React). I am then attaching d3 drag behavior to all of them. The drag behavior is applied and drag function is being executed, but when I drag one of...
Damb
0

votes
0

answer
4

Views

Grouped bar chart array indexing in tooltip and sort by within group values

I've been trying to learn Javascript on my own for data visualization in the past couple days and is working/struggling with a grouped bar chart. Chart working in progress: https://blockbuilder.org/lydiawawa/261aebe55bef8b556d257f3693cca37e x-axis: Drug Categories y-axis: Count of Drug Categories x...
lydias
1

votes
2

answer
100

Views

vuejs scoped styles not working with d3js

I am trying to integrate Vue.js and D3.js. What I notice is sometimes the CSS classes don't really work on the svg elements. I am giving the snippet of the vue component below. Hello world import * as d3 from 'd3'; export default { name: 'LineChart', mounted() { d3.select('h1').attr('class','red-tex...
waltwhiterk
1

votes
1

answer
65

Views

d3.js v5.9.1 - some methods in this version are not working as expected

I am using d3.js in an Angular 7.1.4 project. The version of d3 I am using is 5.9.1, which is the latest version so far. I installed this using npm as follows: npm install d3 which put 'd3': '^5.9.1' in my package.json file. I also installed @types/d3 through npm with the command npm install @types/...
Kingamere
1

votes
2

answer
76

Views

Set 24 hours time format in react-vis time scale axis

I'm using XYPlot with xType={'time'} and Russian locale as described in documentation, is there a way to pass 24h time format to d3-scale? Instead of '03 AM' I need something like '03:00'. Russian locale from d3-time-format has time defined as %H, which should be 24 hours : { 'dateTime': '%A, %e %B...
miki noidea
1

votes
1

answer
23

Views

D3: data update “enter” selection is empty

I'm trying to use the data, update, enter pattern in D3 to update some data. I've been following this example: https://bl.ocks.org/mbostock/3808218 I've got two sets of data, one with an extra value: const data = [ { weekId: 'w-1', start: 100 }, { weekId: 'w-2', start: 200 } ]; const updatedData = [...
Joe
0

votes
0

answer
12

Views

Angular 7 Styles are applied only after I press a key example control f12, also it works if the component is at app.module level

Angular 7 is not applying styles, unless I press f12. Also the code does work if the component is at the app.module level. Nested module code does not apply the svg styles. I have Angular 7 + d3js + svg
RedMess
1

votes
1

answer
228

Views

Reading text file with special characters using d3.request

I have a file.txt that I need to get to my script and parse via d3.request. The content of file is encoded with windows-1250 encoding and has extra lines to be deleted, so that only lines starting with 'Date' and '2017' should pass. So far I have been using cli solution to grep text file (removing e...
mtx
1

votes
0

answer
52

Views

D3 fisheye distortion issue for simple line chart

I am bit new to d3.js, looking to implement fish-eye/magnifier to the simple line chart, the problem am facing i do not see any change/movement in the chart when mouse is moved, what could be the problem with my code, could anyone please point me out in right direction, any help will be much appreci...
Praveen
1

votes
0

answer
40

Views

d3.js: Initial brush size/graph selection

I currently have a basic line graph set up using d3.brush for a viewport. The data I have coming in is from various queries in a postgres db and so is subject to change. When the page is loaded, the entire dataset spans the graph and the selection below reflects that. Is there a way that I could hav...
kuomi
1

votes
0

answer
137

Views

Passing a local variable into an anonymous function in Javascript (D3 filtering)

I'm trying to pass a local variable (a dictionary) into a D3 filter function, but am having little success in doing so. d3appendedElement.on('click', function(d){ var county_list = state_retriever[d.id]; //county_list is a dictionary: //county_list = {'56001': true, '56003': true, '56005': tru...
asuprem
1

votes
0

answer
143

Views

d3 single stacked chart with rounded corners only on first and last rect's

I have a stacked chart that i need the corners to be rounded , i tried adding .attr('rx',10) and ry , 10. But that way all rects are getting round, and thats not what i need, the first one needs a left round corner and the last one needs a right round corner. this is the chart js var datavars = [22...
1

votes
0

answer
72

Views

dc.js elasticY range bound by brush y values

How can we control the elasticY recalculation of the Y axis range, on a scatter plot, to be bound by the brushes Y range? Thus if a scatter plot has a brush bounded on the Y axis between [6-8) and the elasticY recalculates the new Y axis range to be [3-7] we would like the new Y axis range to be [3...
Chris Wolcott
1

votes
2

answer
468

Views

Hide axis tick values under a certain range in d3.js

I'm looking for a way of hiding axis tick values that fall under a certain range of values in D3.js. For example, let's say my y axis shows values from 0 to 100, showing every 20 of them (0, 20, 40, 60, 80, 100). Now, how would one hide certain tick values from showing up? So if I want to hide value...
Akbar
1

votes
1

answer
88

Views

Implementing shift click and click functionality on the same element

I am trying to implement an on click event in d3 but I also want to have the option to shift click on the same svg element to trigger a different functionality. If I click on the element, I want it to call me clicked() function, but if I shift click on the element, I want it to change it's fill styl...
iMancini
1

votes
0

answer
100

Views

Wrap axis labels in dc.js Bar Chart

Is there a way to wrap the axis labels in dc.js. I tried searching the internet where i could find solutions by using d3.js and it doesn't work using dc.js. Appreciate your help in advance!! Thanks
dataguy
1

votes
0

answer
74

Views

D3 Map projection scale level corresponding to Zoom level in Google Maps

Is there any corresponding projection.scale() values in d3 respective to the zoom levels in google map.I think there is 20 levels of zoom in google maps. Currently I am providng zoom to my d3 Map as below, projection.scale(zoomLevel); To match the exact zoom level of google map I need the 'zoomLevel...
swaroop joseph
1

votes
1

answer
81

Views

D3 graph shows zero in y axis

Hello i was plotting D3 line graph with brush and zoom i was able to do it but in y-axis of the graph the values shows zero even after data having some values and one more problem is mouse-hover even is not firing properly on circles due to pointer-events: all; on .zoom class adding fiddle h...
graylog dev
1

votes
0

answer
169

Views

Export svg animations to gif, webm or videos format

Hi currently my current task is allow users to playback, reverse and click on the play bar to play it at time mark on an animated SVG d3 graph. And my very first idea is to convert it to a gif or video file which could support those features. I do some few research, but still unclear how could I exp...
Hayden Nguyen
1

votes
1

answer
113

Views

Multiple layers with dc.js series charts

I'm struggling to get a dc.js plot to work. The data object contains 2 value fields, and I need to designate val to scatterPlot and smooth to lineChart. Example below and jsfiddle here. div{ display: inline; } var datum = [ {date: '2018-01-01T00:00:00Z', val: 0, smooth: 3, type: 'set1'}, {date: '20...
geotheory
1

votes
1

answer
155

Views

show/hide D3 element based on mouse in/mouse out

I have two elements here. points and labels (I am using D3) As i mouseover the points element I would like it show the label element related to that particular point. As I mouse out I want the label to disappear. Currently when I mouseover, ALL the labels appear (not just the one for that point) and...
Dominic
1

votes
0

answer
105

Views

d3 v4 smoothing line using curve

I have the following line: I tried smoothening the line using the curve functions: JS: const line = d3 .line() .curve(d3.curveMonotoneY) .x(d => x(d[0])) .y(d => y(d[1])); CSS: .line { stroke-width: 1px; fill: none; // shape-rendering: optimizeSpeed; stroke-linejoin: round; } But no matter what type...
Avraam Mavridis
1

votes
0

answer
412

Views

SyntaxError: Unexpected token T in JSON at position 0

I'm coding a Typescript application. In This application I'ld read some json file with the function d3.json, but the code doesn't work. The error is this: SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () at Object. (d3-request.node.js:176) at respond (d3-request.node.js:39)...
FireLion90
1

votes
0

answer
122

Views

Fade color of connected nodes on button click in d3

I want to change color on button click, in JavaScript(d3.js), only if node is connected with others. I'm following this example https://bl.ocks.org/mbostock/929623: rect { fill: none; pointer-events: all; } .node { fill: blue; } .link { stroke: #999; } var width = 960, height = 500; var fill = d3.sc...
Asia
1

votes
2

answer
198

Views

d3.js Color Groups for Radar Chart

I'm using this d3 Radar Chart, and now I want to color the groups. Here's my data - var data = [ [ {axis:'volume(N)',value:0.074095419,group:'one'}, {axis:'heightBBOX(N)',value:0.618900916,group:'one'}, {axis:'floor_area(N)',value:0.239036487,group:'one'}, {axis:'RatioSunExp_TotWall',value:0.6709085...
ayr4n
1

votes
0

answer
269

Views

Line chart with radio button and multiple series

I would like to create a line chart like this, with the difference of having radio buttons instead of a dropdown selector. This is my data.csv file: CODE,YEAR,MODALITY,VALUE AB,2000,first,15 AB,2000,second, AB,2000,third,33 AB,2001,first,20 AB,2001,second,25 AB,2001,third,87 AB,2002,first,6 AB,2002,...
1

votes
0

answer
90

Views

d3.js polygon strip on a cylinder spanning more than 360°

Following this question, D3.geo : Spherical arcs rather than straight lines for parallels? I was able to draw projected polygons (1) by using path: var poligono = { 'type': 'Polygon'...
leonard vertighel
1

votes
1

answer
28

Views

Transitioning a path more than once

I'm having trouble trying to create a transition of groups. I've created an object from a path based on x and y data. I want this object to transition horizontally 5 times. I have 5 groups that will use the same object and transition. I'm trying to use a for loop so I don't have to rewrite that tran...
1

votes
0

answer
184

Views

d3js: display tips coorectly after zoom

I'm trying to write an example using D3.js where images lay on a static background. I can move the background and zoom and I can also move separate images (something like this but with images). Also, I need to display a tooltip when the mouse is over an image. Here what I have tried with d3js v4: Pr...
mrgloom
1

votes
1

answer
261

Views

Enzyme testing mount with d3 chart

I am using Enzyme to test a d3 chart component. I encounter a problem that d3.select cannot find the container div as well as this error message: TypeError: Cannot read property 'getAttribute' of null Here's my code: Chart component file: ProgramMeasureTrendsComponent.js class ProgramMeasureTrendsCo...
JunChen Zhu
1

votes
1

answer
190

Views

DC.JS create series plot using multiple columns

I have the following below code and I would like to plot date on the x-axis and y-axis should have the values of total and tip on two separate series. Is this possible from DC? I can't find a way to determine series using a separate column instead of using a column to determine the series. Thank yo...
GlenCloncurry
1

votes
4

answer
351

Views

Zoom only when Ctrl + scrolling

I've been messing with the D3JS source code. What I want to achieve is only allow zooming with the Scrolling (Just like Google Maps), if CTRL is pressed too. I've been messing with the complete D3: https://d3js.org/d3.v4.js I was trying to achieve this around line 16556: function wheeled() { if (!fi...
CAJ69I
1

votes
1

answer
178

Views

Tooltip with own event listeners

Sorry if this is partially duplicate, couldn't find any satisfactory answer. I have a d3 graph that consists of a line with points. My points have events that make a tooltip appear/disappear, see below: var div = d3.select('body') .append('div') .attr('class', 'tooltip') .style('opacity', 0); var po...
ddsLeonardo

View additional questions