d3.js

问题 I'm trying to set the y-axis range of the chart from 1-100. Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a

问题 The documentation for d3.drag states the DOM element target of the drag event will be available in this to the callback: When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners: the current datum d and index i, with the this context as the current DOM element. But my call back is an object instance and this points to that object. So I need another way of accessing the current DOM element that is normally passed in this

问题 I am new to d3 v4, want to build a gauge chart where i can give min, max and actual needle value, lets say i want the needle to be shown at 60 with min as 50 and max as 80 instead of 0 to 100, thanks for this SO question where almost my requirement met except with min and max values. I've tried changing current and previous values including data, doesn't work. Any help is much appreciated. my plunker link 回答1: I have updated the plunker. Link: https://plnkr.co/edit/xa2d3YTxnxU5kBIOenLR?p

问题 I am new to d3 v4, want to build a gauge chart where i can give min, max and actual needle value, lets say i want the needle to be shown at 60 with min as 50 and max as 80 instead of 0 to 100, thanks for this SO question where almost my requirement met except with min and max values. I've tried changing current and previous values including data, doesn't work. Any help is much appreciated. my plunker link 回答1: I have updated the plunker. Link: https://plnkr.co/edit/xa2d3YTxnxU5kBIOenLR?p

问题 I am new to d3 v4, want to build a gauge chart where i can give min, max and actual needle value, lets say i want the needle to be shown at 60 with min as 50 and max as 80 instead of 0 to 100, thanks for this SO question where almost my requirement met except with min and max values. I've tried changing current and previous values including data, doesn't work. Any help is much appreciated. my plunker link 回答1: I have updated the plunker. Link: https://plnkr.co/edit/xa2d3YTxnxU5kBIOenLR?p

问题 D3 is used to generate a svg in an angular2 component. How to update properties x and y in component from svg event mousemove ? export class AxisComponent implements OnInit { x:number; y:number; ngOnInit() { var svgWidth=400; var svgHeight=400; var margin = {top:25, right:25, bottom:50, left:50}; var width = svgWidth - margin.left - margin.right; var height = svgHeight - margin.top - margin.bottom; var svg = d3.select('#container').append('svg') .attr('width', svgWidth) .attr('height'

问题 I'm working on a data visualization proyect, using javascript and d3. In this proyect I'm showing the data using various charts (the data comes from an external source). I'm new in this language so I´m using pieces of code from differents parts of the internet and a lot of the work comes from editing those pieces in order to make them compatible with each other. I have succefully deploy the charts (A big accomplishment for me, since I started with javascript and HTML just one week ago). Now i

问题 I'm drawing a simple interpolated line using D3.js (output as path). However, I want part of the path to have a dashed stroke if a boolean in a data point is set to true: Link to image An easy solution would be to just draw it with <line> segments instead - but that way I lose the interpolation. Then I found an example from mbostock, showing how to draw a gradient along a interpolated path. I modified it to just draw transparent path fills whenever the boolean was set to true and white fills

问题 I have an svg element (created with D3). while in chrome the "getBBox" function works fabulously, it fails in fireFox and Edge. Thought I saw this discussion in couple of places(e.g. here, here) none of them yielded a clear answer. This doesn't work either - getBoundingClientRect() And my element is not underneath (i saw that it might cause issues). Thanks alot! 回答1: Ok, i found what was wrong. Chrome can handle "g" elements with "display : none". but Firefox and edge treat it as "non

问题 I would like to build a sankey diagram that highlights a path from end to end. I would like to use something free and that doesn't require me to upload data to do so. This Tableau visualization has exactly the functionality I want- when you hover over one link you can see the entire trajectory from start to finish without highlighting any other link that intersects with the same nodes and each of the link segments align cleanly: https://public.tableau.com/profile/actinvision#!/vizhome