d3.js

问题 I'm trying to create some bar chart with the U.S. GDP growth. In the x axis, all the YYYY-MM-DD values are shown even though I explicitly set .call(d3.axisBottom(x).ticks(10); What should I do? I tried it with d3.timeYear.every(25) too. Here's my code: var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json"; var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right,

问题 i have to use leaflet-d3 on svelte to create a hexmap. I'm using a code already tested for other stuff. It can be found here. function createMap(id, config, zoomFunction) { let initialView = [config.startLat, config.startLng]; if(!config.startLat || !config.startLng){ initialView = [0,0] config.startZoom = 1; } let m = L.map(id, {preferCanvas: true, minZoom: config.minZoom, maxZoom: config.maxZoom }).setView(initialView, config.startZoom); let layers = { 'Street map': L.tileLayer.provider(

问题 I'm developing application that uses D3.js to showing some visualizations. How can I show preview of HTML file (that uses JS) on GitHub? I need demo for every commits (historical), not only for latest version. I generate static version of my application to HTML+JS with bundled JSON data and linked D3.js library from CDN, so I need only to serve HTML+JS. No backend. GitHub Pages My first thought is using GitHub Pages (it's popular answers #1, #2) . It is good, but with this I can show demo

问题 I started to work with d3. And have a question, how can I animate properly triangle along the filling path? I created a base for the gauge chart and animated it. var chart = d3.select("#speedometer"); const arc = d3 .arc() .outerRadius(120) .innerRadius(90) .startAngle(-Math.PI / 2); chart .append("path") .datum({ endAngle: Math.PI / 2 }) .attr("transform", "translate(160, 180)") .attr("class", "background") .style("fill", "#495270") .attr("d", arc); const triangle = chart .append('g') .attr(

问题 The rotation is tweened using the following function. How can I make this spin look more real? How can I control the speed making it start fast and then slow down instead of speed up and back down evenly... function rotTween(to) { var i = d3.interpolate(oldrotation % 360, rotation); return function(t) { return "rotate(" + i(t) + ")"; }; } var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var h = Math.max(document.documentElement.clientHeight, window.innerHeight |

问题 I have been using c3.js and cant figure out how to get a JavaScript event for onClick of the Data group labels which is displayed in X Axis. Basically i need event to which I can register a event handler in the below Circled area. 回答1: There is no method, as of yet, in c3js for adding onClick events on ticks. But you can directly use d3: d3.selectAll('.tick') .on('click', function(value,index){ alert('You clicked a tick.'); }); This will add an event that will fire when you click a tick.

问题 I am upgrading my app from d3 v5 to v6 and am having an issue migrating the d3.mouse functionality. In my app I apply a transform to the top level svg group and use the zoom functionality to zoom and pan (scale and translate). When I double click on the screen I take the mouse position and draw a square. Now I am replacing the d3.mouse function with d3.pointer. In my double click event I get the mouse position by calling d3.pointer(event) . However this function is not producing a position

问题 I am trying to make a chart that looks like this: I have a D3.nest data structure that looks like this: {"key":"Area 1","values":[ {"key":"5. Validation Complete","value":12.5}, {"key":"Deferred","value":1}, {"key":"3. Identify & Validate Proposed Solutions","value":5}, {"key":"1. Define & Describe the Problem or Opportunity","value":0}]}, {"key":"Area 2","values":[ {"key":"5. Validation Complete","value":41.2}, {"key":"4. Implement the Solutions","value":86.6}, {"key":"3. Identify & Validate

问题 I am trying to make a chart that looks like this: I have a D3.nest data structure that looks like this: {"key":"Area 1","values":[ {"key":"5. Validation Complete","value":12.5}, {"key":"Deferred","value":1}, {"key":"3. Identify & Validate Proposed Solutions","value":5}, {"key":"1. Define & Describe the Problem or Opportunity","value":0}]}, {"key":"Area 2","values":[ {"key":"5. Validation Complete","value":41.2}, {"key":"4. Implement the Solutions","value":86.6}, {"key":"3. Identify & Validate

问题 Mike Bostock uses the following snippet to generate uniformly-spaced bins for a histogram: var data = d3.layout.histogram() .bins(x.ticks(20)) (values); source Is there any way to adapt this to a project that uses dc.js and crossfilter.js? Essentially, I want to dynamically generate the bins and then use the chart to filter on a particular attribute. Total newbie to this. Any guidance would be appreciated! 回答1: dc.js supports histograms via crossfilter. Use a group for your bar chart that