Question

我正在尝试让我的工具提示读取我的数据。但事实并非如此。如何让它读取数据？

我不明白为什么我可以通过写作来在我的图表中应用文字标签 .text（function（d）{return d;}）;
而工具提示不会读它。

var data = {
  labels: [
   'Trøndelag', 'Innlandet', 'Oslo','Nordland','Sør-Øst',  'Alle distr.',
   'Øst', 'Sør-Vest', 'Møre og R.',
   'Troms', 'Vest', 'Finnmark',
],
series: [
{
  label: 'Svært stor tillit',
  values: [32, 29, 29, 22, 27, 27,31,25,24,26,26,20,24]
},
{
  label: 'Ganske stor tillit',
  values: [55,54,53,58,53,53,49,53,54,51,48,53,48]
},
{
  label: 'Verken stor eller liten tillit',
  values: [7,12,13,14,14,16,14,15,16,19,19,15]
},
{
  label: 'Ganske liten tillit',
  values: [4,4,3,2,3,3,3,3,4,5,4,4,7]
},
{
  label: 'Svært liten tillit',
  values: [1,1,2,3,3,2,1,3,3,1,2,4,6]
},
  {
  label: 'Vet ikke',
  values: [0,0,1,0,0,0,1,1,0,0,0,0,1]
},
  {
  label: 'Ubesvart',
  values: [0,0,0,0,0,0,0,0,0,0,0,0,0]
}
]
};
var margin = {top: 20, right: 5, bottom: 20, left: 5},
width = parseInt(d3.select('.chart').style('width'), 10),
width = width - margin.left - margin.right,
chartHeight = 1310,
groupHeight      = barHeight * data.series.length,
gapBetweenGroups = 0,
spaceForLabels   =62,
spaceForLegend   = 64,

barHeight=14;


var zippedData = [];
for (var i=0; i<data.labels.length; i++) {
for (var j=0; j<data.series.length; j++) {
zippedData.push(data.series[j].values[i]);
  }
}

// Color scale
var color = d3.scale.category20c();

var x = d3.scale.linear()
.domain([0, d3.max(zippedData)])
.range([0, width]);

var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);

d3.select(window).on('resize', resize);
function resize (){
width = parseInt(d3.select('.chart').style('width'),10);
width= width - margin.left - margin.right;
x.range([0,width]);
}

var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");

// Specify the chart area and dimensions
var chart = d3.select(".chart")
.attr("width", spaceForLabels + width + spaceForLegend)
.attr("height", chartHeight);

// Create bars
var bar = chart.selectAll("g")
.data(zippedData)
.enter().append("g")
.attr("transform", function(d, i) {
  return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
})
;
var legendPlass = 150;

var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);


// Create rectangles of the correct width
bar.append("rect")
.attr("fill", function(d,i) { return color(i % data.series.length); })
.attr("class", "bar")
.attr("width", x)
.attr('y', legendPlass )
.attr("height", barHeight - 1)

;

// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", legendPlass + barHeight / 2)
.attr("fill", "red")
.attr("dy", ".35em")
.text(function(d) { return d; });

// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) { return - 5; })
.attr("y", legendPlass)
.attr("dy", "1em")
.text(function(d,i) {
  if (i % data.series.length === 0)
    return data.labels[Math.floor(i/data.series.length)];
  else
    return ""});

chart.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
  .call(yAxis);

//CREATING THE TOOLTIP

chart.selectAll(".bar")
.on("click", function() {
    tooltip.style("opacity", 0);  })
.on("click", function(d) {
    var pos = d3.mouse(this);
    tooltip
        .transition()
        .duration(500)
        .style("opacity", 1)
        .style("left", d3.event.x + "px")
        .style("top", d3.event.y + "px")
         .text(function(d) { return d; });
});

// Draw legend
var legendRectSize = 16,
legendSpacing  = 4;

var legend = chart.selectAll('.legend')
  .data(data.series)
.enter()
.append('g')
.attr('transform', function (d, i) {
    var height = legendRectSize + legendSpacing;
   var offset = -gapBetweenGroups/2;
   var horz = spaceForLegend;
   var vert = i * height - offset;
  return 'translate(' + horz + ',' + vert + ')';
});

legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d, i) { return color(i); })
.style('stroke', function (d, i) { return color(i); });

legend.append('text')
   .attr('class', 'legend')
.attr('x', legendRectSize + legendSpacing )
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d.label; });

Answer 1

您需要向其附加数据才能阅读。你有这个：

var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);

需要像这样：

var tooltip = d3.select("body")
.append("div")
.attr("class", "d3-tip")
.style("position", "absolute")
.style("opacity", 0);

var tooltipWithData = tooltip.data(data).enter();

然后再使用它：

 tooltipWithData 
        .transition()
        .duration(500)
        .style("opacity", 1)
        .style("left", d3.event.x + "px")
        .style("top", d3.event.y + "px")
         .text(function(d) { return d; });

D3工具提示不会读取我的数据

1 个答案: