d3.js：在工具提示中使用两个单独的数组显示x轴值和y轴值

Question

I'm creating a bar chart from two different (flat) arrays, one array with count data and one array with date data. I am having difficulty grabbing the x-axis data point (date) to display in the tooltip. I've tried d3.zip to combine the arrays but can't seem to figure out how to index the values that way either. Any suggestions welcome!

 var parseDate = d3.timeParse('%Y-%m-%d'); var newECdailyArray = [1, 1, 4, 5, 9]; var newEDdailyArray = ["2016-01-05", "2016-01-10", "2016-02-01", "2016-02-15", "2016-03-05"]; var tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("opacity", "0") .style("position", "absolute"); var width = 500 var height = 500 var margin = { top:30, bottom:70, right:30, left:30 } var y = d3.scaleLinear() .domain([0, d3.max(newECdailyArray)]) .rangeRound([height, 0]); var x = d3.scaleTime() .domain(d3.extent(newEDdailyArray, function(d) { return parseDate(d); })) .range([0, width]) .nice(d3.timeMonth); var yAxis = d3.axisLeft(y); var xAxis = d3.axisBottom(x); var svg = d3.select('#thing').append('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var ChartGroup = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ChartGroup.selectAll('rect') .data(newECdailyArray) .enter().append('rect') .attr('width', 5) .attr("height", function(d) { return height - y(d); }) .attr('x', function(d, i) { return x(parseDate(newEDdailyArray[i])); }) .attr("y", function(d) { return y(d); }) .attr('fill', "blue") .on("mousemove", function(d, i) { tooltip .style("opacity", "1") .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block"); console.log(parseDate(newEDdailyArray[i])); tooltip.html("count: " + d + "<br>" + "date: "); }) .on("mouseout", function(d) { tooltip.style("display", "none"); }); ChartGroup.append('g') .attr("class", "axis y") .call(yAxis); ChartGroup.append('g') .attr("class", "axis x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x) .tickFormat(d3.timeFormat("%Y-%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); ChartGroup.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Event Count"); ChartGroup.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 60) + ")") .style("text-anchor", "middle") .text("Date"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <div id='thing'></div> 

I had to boil down my longer code to just the necessary parts for this question (please excuse anything I may have left out, and feel free to comment for clarification.)

Answer 1

You can merge your arrays in this way:

 var newECdailyArray = [1, 1, 4, 5, 9]; var newEDdailyArray = ["2016-01-05", "2016-01-10", "2016-02-01", "2016-02-15", "2016-03-05"]; var data=[] for (i in newECdailyArray){ var val = {}; val['date'] = newEDdailyArray[i]; val['value'] = newECdailyArray[i]; data.push(val) } console.log(data) 

and then reference them using d.date and d.value

Also I tried your code and it works fine. I can see the date and the value in the tooltip. Here's the fiddle.

 var parseDate = d3.timeParse('%Y-%m-%d'); var newECdailyArray = [1, 1, 4, 5, 9]; var newEDdailyArray = ["2016-01-05", "2016-01-10", "2016-02-01", "2016-02-15", "2016-03-05"]; var tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("opacity", "0") .style("position", "absolute"); var height = 400; var width = 600; var margin = { left: 30, right: 30, top: 30, bottom:70, } var x = d3.scaleTime() .domain(d3.extent(newEDdailyArray, function(d) { return parseDate(d); })) .range([0, width],0.4) .nice(d3.timeMonth); var y = d3.scaleLinear() .domain([0, d3.max(newECdailyArray)]) .rangeRound([height, 0]); var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y); var svg = d3.select('#thing').append('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var ChartGroup = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ChartGroup.selectAll('rect') .data(newECdailyArray) .enter().append('rect') .attr('width', 15) .attr("height", function(d) { return height - y(d); }) .attr('x', function(d, i) { return x(parseDate(newEDdailyArray[i])); }) .attr("y", function(d) { return y(d); }) .attr('fill', "blue") .on("mousemove", function(d, i) { tooltip .style("opacity", "1") .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block"); console.log(parseDate(newEDdailyArray[i])); tooltip.html("count: " + d + "<br>" + "date: " + newEDdailyArray[i]); }) .on("mouseout", function(d) { tooltip.style("display", "none"); }); ChartGroup.append('g') .attr("class", "axis y") .call(yAxis); ChartGroup.append('g') .attr("class", "axis x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x) .tickFormat(d3.timeFormat("%Y-%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); ChartGroup.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text(" Event Count"); ChartGroup.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 60) + ")") .style("text-anchor", "middle") .text("Date"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <div id='thing'></div> 

Answer 2

The idiomatic (and more reliable) way to store the data in a D3 code is keeping all the different properties in a single object , and storing all the different objects (one for each data point) in an array.

However, since the two arrays you have contain the data in the same sequence (ie, their indices match), just use the index:

tooltip.html("count: " + d + "<br>" + "date: " + newEDdailyArray[i]);
//index here ----------------------------------------------------^

Here is your code with that change only:

 var parseDate = d3.timeParse('%Y-%m-%d'); var newECdailyArray = [1, 1, 4, 5, 9]; var newEDdailyArray = ["2016-01-05", "2016-01-10", "2016-02-01", "2016-02-15", "2016-03-05"]; var tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("opacity", "0") .style("position", "absolute"); var width = 500 var height = 500 var margin = { top:30, bottom:70, right:30, left:30 } var y = d3.scaleLinear() .domain([0, d3.max(newECdailyArray)]) .rangeRound([height, 0]); var x = d3.scaleTime() .domain(d3.extent(newEDdailyArray, function(d) { return parseDate(d); })) .range([0, width]) .nice(d3.timeMonth); var yAxis = d3.axisLeft(y); var xAxis = d3.axisBottom(x); var svg = d3.select('#thing').append('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var ChartGroup = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ChartGroup.selectAll('rect') .data(newECdailyArray) .enter().append('rect') .attr('width', 5) .attr("height", function(d) { return height - y(d); }) .attr('x', function(d, i) { return x(parseDate(newEDdailyArray[i])); }) .attr("y", function(d) { return y(d); }) .attr('fill', "blue") .on("mousemove", function(d, i) { tooltip .style("opacity", "1") .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block"); console.log(parseDate(newEDdailyArray[i])); tooltip.html("count: " + d + "<br>" + "date: " + newEDdailyArray[i]); }) .on("mouseout", function(d) { tooltip.style("display", "none"); }); ChartGroup.append('g') .attr("class", "axis y") .call(yAxis); ChartGroup.append('g') .attr("class", "axis x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x) .tickFormat(d3.timeFormat("%Y-%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); ChartGroup.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Event Count"); ChartGroup.append("text") .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.top + 60) + ")") .style("text-anchor", "middle") .text("Date"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <div id='thing'></div>