d3.js

问题 I want to sort my json data in ascending order which has title, price. want to sort by price. This my json data which is used in d3js. var data = [ {"title":"ACER Aspire DQ.SP3EK.001 ZS 605 Refurbished 19.5\u201d All-in-One PC", "price":"<549.99"}, {"title":"LENOVO C540 23\u201d Touchscreen All-in-One PC","price":"699.99"}, {"title":"ACER Aspire V5-122P 11.6\u201d Touchscreen Laptop/u2013silver","price" :"499.99"}, {"title":"HP Pavilion 15-n097ea 15.6 Laptop \u2013 Goji Berry","price":"429.99

问题 I have my real time d3 log scale graph like below: I would like to show only the major ticks with their labels : 10^-2, 10^-1, 10^0, 10^1, 10^2 but not the minor ticks I would like to have the log Y axis look like this without the minor ticks: How can I do this? EDIT: post some code svg = d3.select("#chart1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); y = d3.scale.log().domain([1e-1, 1e2]).range([height, 0]); yAxis =

问题 I have my real time d3 log scale graph like below: I would like to show only the major ticks with their labels : 10^-2, 10^-1, 10^0, 10^1, 10^2 but not the minor ticks I would like to have the log Y axis look like this without the minor ticks: How can I do this? EDIT: post some code svg = d3.select("#chart1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); y = d3.scale.log().domain([1e-1, 1e2]).range([height, 0]); yAxis =

问题 Take a look at this jsfiddle. Magnifying on hover works well for text and images, but I would like to have the same effect for the chart. I would like the solution, if possible, to be applicable to any D3 SVG-based chart. The example uses jquery plugin AnythingZoomer, it looked to me as a good starting point, however, you don't need to stick to it, you can use anything else if you wish. I am aware of D3 fisheye pluging, this is related, but not quite what I want. 回答1: You can do this by not

问题 data = [ {"name":"c1","id":4690 ,"day":[1,3], "start":"8:00", "end":"10:00"}, {"name":"c3","id":5283 ,"day":[3,4], "start":"8:00", "end":"17:00"}, {"name":"c4","id":4862 ,"day":[4], "start":"10:00", "end":"12:30"}, {"name":"c5","id":4862 ,"day":[5], "start":"10:00", "end":"12:30"}] i'm trying to create a rectangle for each day of each object, the following code without the "for" is working and creating a rectangle for day[0], but not working for all the days!! function markCourses( data) {

问题 I wrote a custom zoom function for my svg using d3 like so: //Zoom behavior function myzoom() { xpos = d3.event.translate[0]; ypos = d3.event.translate[1]; vis.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")"); } This works fine on non-touch devices, but when I zoom in on touch devices the d3.event.translate array sometimes starts containing NaN's. When this occurs all subsequent calls to myZoom also have this issue and zooming stops working. This is the

问题 I need to animate pie chart into a donut chart (or ring chart). Here is my code: var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0) var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60) var path = pie_chart.selectAll('path') .data(pie(data)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return color_scale(d.data.device) }) .transition().attr('d', arc2) Some times it's working but sometimes it is not. I have tried to apply transition to arc

问题 I am using d3 v5 with reactJS. I am calling d3.csv inside react 'List' class like following: import React from 'react'; import * as d3 from 'd3'; class List extends React.Component{ componentDidMount(){ d3.csv("./data/data.csv").then(function(d, error){ console.log(d); }); } render(){ return( <div> </div> ); } } export default List; and List is being imported in following 'App' class import React, { Component } from 'react'; import logo from './logo.svg'; import List from './components/list

问题 Say if there is a table like this: var data = [ ['Orange', 'Orange', [6,3,3,2,5]], ['Apple', 'Red', [6,2,6,5,5]], ['Grape', 'Purple', [9,1,2,3,1]] ] I'd like the strings to represented as strings, but the number array represented as a D3 line chart. If it's just text that I care about, I can selectAll td elements and insert some text. var tcells = trows .selectAll("td") .data(function(d, i) { return d; }) .enter() .append("td") .text(function(d, i) { return d; }); The 3rd column is text so I

问题 Having troubles finding information to draw a circular sector on a given map projection in D3.js. I have been using d3.svg.arc, but now I need to transform it to given d3.geo projections. Note, this is not for drawing arcs between two points, but circular sectors (think pie wedges). 回答1: You can create a function that calculates the coordinates along the desired arc in spherical coordinates (making use of the d3.geo.rotation function to save yourself the headache of figuring out the correct