d3.js

问题 I have checkbox set including labels and inputs. Initially, I've made a div as a wrapper for label and input above svg because I want to have the checkbox avobe svg. And then I bind data to make checkboxes including label and input according to nested data key. var countryWrapper = d3.select(".checkboxWrapper") var countryButton = countryWrapper .selectAll(".checkboxes") .data(nest) .enter() .append("label") .attr('for', function(d) { return d.key; }) .text(function(d) { return d.key; })

问题 I am trying to load data from a csv file and store the data in a dictionary variable named store as key routes. The first lines of the csv file look like this: ID,AirlineID,AirlineName,AirlineCountry,SourceAirportID,SourceAirportCode,SourceAirport,SourceCity,SourceCountry,SourceLatitude,SourceLongitude,DestAirportID,DestCode,DestAirport,DestCity,DestCountry,DestLatitude,DestLongitude 1,24,American Airlines,United States,4355,ABE,Lehigh Valley International Airport,Allentown,United States,40

问题 I have created a D3 chart with year column as a number and have worked. But now we need to add the month and so I have added the month for one year as 201701,201702,201703,201704......201712 then the code is working fine as expected. But when I just include 201611 (Nov 2016) for years list then 2017 year months all overlap.(I understand that it is taking as a number and that's why the number the difference between 201701 and 201611 ) This is the screenshot: I have tried with the changing that

问题 In a follow up to my previous question I am trying to adopt to my needs this great example of a map (working with this dataset) and opening a custom tooltip upon hovering. I would like to exclude from hovering some states. I want them to appear on a map but as gray and non-responsive. If I were working with svg path I would define a different css class for polygons/states with hovering and a different class just for the non-responsive. I don't know how to do it in this case where my paths are

问题 I have a codepen here - https://codepen.io/anon/pen/yvgJKB I have a simple stacked bar chart. I want to make this into a component so I need to pass in the values to make it reuseable The x scale function returns d.date let x = d3.scaleBand() .domain(dataToStack.map(function(d){ return d.date; })) .rangeRound([0,width]) .padding(0.05); I want to pass the 'date' part in from a variable I can do this for the x attr of the bar. let xAxisValue = 'date' .attr('x', (d, i) => { let link = d.data

问题 I have 2 lines in the form of waves plotted in x-y axis based on randomly generated data and i am showing circles on the waves denoting the data points on it. Based on setInterval of 200 ms , I am updating the original data and the lines(waves) are moving to the left, but the issue is that the only circles which are there in the initial interval are moving and for 2nd interval onward the circles are not showing up on the waves. see the jsfiddle for the running code : https://jsfiddle.net

问题 I'm trying to create a modified version of Mike Bostock's calendar view (https://bl.ocks.org/mbostock/4063318), which only shows a few months. I'm almost there, but I'd like to add a short transition when the individual cells are filled. I tried to create this but it isn't transitioning. I must be missing something obvious. Any ideas? Thanks! Here is the script (see the line ".transition().duration(1000)"): <script src="https://d3js.org/d3.v4.min.js"></script> <script> var width = 550, height

问题 In my current chart the x-axis values are illegible. how can I improve the presentation or at least that the intervals of the x values have a uniform separation. var chart = c3.generate({ data: { xs: { data1: "data2", data3: "data4" }, xSort: false, columns: [ ['data1', -4,3,4,7,8,9,8,7,3], ['data2', -5,2,3,4,5,4,3,2,1], ['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10], ['data4', Math.random() * 10,Math.random() * 10

问题 I have modified some code available on the internet to draw a line chart based on the data contained in the array "data". <!doctype html> <html> <head> <title></title> </head> <body> <style> .chart-line { fill: none; stroke : #0ff; shape-rendering: crispEdges; } </style> <script src="https://d3js.org/d3.v4.min.js"> </script> <script> var svg = d3.select("svg"), margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr(

问题 I'm trying to implement a tooltip on mouseover for a multi line chart. I've followed the code from this example and tried to change it so that I see the X values of the lines for a given hovered Y value, but I'm not able to get it to work. My attempt can be found below. In my actual implementation I'm writing in Typescript and the functions 'getTotalLength()' and 'getPointAtLength()' are saying they don't exist on property Element. Also if you can add a text box at on the line that has the