d3.js

问题 I am a new javascript programmer. I'm trying to adjust the circles' size and svg size given the size of the window. Also, the code now creates circles of different sizes, but haven't been able to simultaneously adjust to the text size. var width = 600; var height = 600; // Place your JSON here. var data = [ { CategoryName: 'Adaptive Security', SkillProficiencyId: 1 }, { CategoryName: 'Programmer', SkillProficiencyId: 2 }, { CategoryName: 'Coffee Drinker', SkillProficiencyId: 3 } ]; /* This

问题 I am having a piechart drawn using d3js. to the arc labels i am applying the following style. .pieChartOuterLabel { font-size: 1em; fill: black; font-weight: bold; font-family: 'Times New Roman, Times, serif'; } this is how my pie chart looks like. you can see the the percentage text labels are blurred ( it seems the other css styles applied to the parent elements are setting opacity to .5 to these labels). i have tried this but it didnt work well. .pieChartOuterLabel { font-size: 1em; fill:

问题 I am having a piechart drawn using d3js. to the arc labels i am applying the following style. .pieChartOuterLabel { font-size: 1em; fill: black; font-weight: bold; font-family: 'Times New Roman, Times, serif'; } this is how my pie chart looks like. you can see the the percentage text labels are blurred ( it seems the other css styles applied to the parent elements are setting opacity to .5 to these labels). i have tried this but it didnt work well. .pieChartOuterLabel { font-size: 1em; fill:

问题 been stuck on this all morning. I've been following this example I've been trying to get this to work in React but sadly no luck. I was able to read the csv in before and console log the data so I know it's finding the right file. What am I missing here? class Linegraph extends Component { componentDidMount() { var parseDate = d3.timeParse("%m/%d/%Y"); var margin = { left: 50, right: 20, top: 20, bottom: 50 }; var width = 960 - margin.left - margin.right; var height = 500 - margin.top -

问题 Tools used D3 js: v4.11.0 react-native: v0.60.3 react-native-webview: v9.3.0 Previously I was using react-native 0.59.8 and I was using WebView from react-native, in this version WebView was working fine, SVG was also loading perfectly, but after upgrading react native to 0.60.3, I also have to take WebView from react-native-webview, React Native WebView :- <WebView scrollEnabled = {true} originWhitelist={["*"]} javaScriptEnabled={true} source={{ uri: isAndroid ? "file:///android_asset/widget

问题 Tools used D3 js: v4.11.0 react-native: v0.60.3 react-native-webview: v9.3.0 Previously I was using react-native 0.59.8 and I was using WebView from react-native, in this version WebView was working fine, SVG was also loading perfectly, but after upgrading react native to 0.60.3, I also have to take WebView from react-native-webview, React Native WebView :- <WebView scrollEnabled = {true} originWhitelist={["*"]} javaScriptEnabled={true} source={{ uri: isAndroid ? "file:///android_asset/widget

问题 I am trying to figure out how to easily integrate any D3.js chart with the DC.js library so as to use the crossfilter feature between all charts. I also do understand a question of this nature has been asked before, adding the link for reference: DC.js - Listening for chart group render I was unable to understand or follow the answer and the following comment threads where @Gordon even gave a small minimal example. Can anyone help me out by putting out a sample code to better understand as to

问题 It would be convenient if there was a way to easily bind to an event at the end of a zoom behavior transition - when the user mouseup or touchends something that moves the chart. Is this possible by just binding all of the up events, or is this something that people have done some other way? 回答1: In d3 v4 the the zoom.on typenames have changed. They are "start", "zoom" and "end" now. var d3zoom = d3.zoom() .on("start", zoomStartFunction) .on("zoom", zoomFunction) .on("end", zoomEndFunction);

问题 It would be convenient if there was a way to easily bind to an event at the end of a zoom behavior transition - when the user mouseup or touchends something that moves the chart. Is this possible by just binding all of the up events, or is this something that people have done some other way? 回答1: In d3 v4 the the zoom.on typenames have changed. They are "start", "zoom" and "end" now. var d3zoom = d3.zoom() .on("start", zoomStartFunction) .on("zoom", zoomFunction) .on("end", zoomEndFunction);

问题 You can see an example of what I am trying to achieve on this page. I have negative and positive axis constructed with this code: this.svg = d3.select(el).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); this.xScale = d3.scale.linear() .range([0, width]); this.yScale = d3.scale.linear() .range([height, 0]); const xAxis = d3.svg.axis()