Question

我正在研究这个小提琴，但图表没有显示，我在这里缺少什么？ Working fiddle 我正在制作一个垂直条形图，需要在条形图上显示工具提示。

我用它在鼠标悬停上添加工具提示

  d3.select('#tooltip')
                                    .style('left', xPos + 'px')
                                    .style('top', yPos + 'px')
                                    .style('display','block')
                                    .select('#value')
                                    .text(d.global);

Answer 1

这里有几个问题：

您没有使用div

id="tooltip"

mouseover / mouseout事件必须属于svg.selectAll(".set")
您的xScale和yScale will始终提供undefined值

你应该可以从这里继续：

＆＃13;

var div = d3.select("body").append("div")
  .attr("id", "tooltip")
  .style("opacity", 0);
var margin = {
    top: 25,
    right: 40,
    bottom: 35,
    left: 85
  },
  w = 500 - margin.left - margin.right,
  h = 220 - margin.top - margin.bottom;
var padding = 10;
var formatPercent = d3.format(".0%");

var color = d3.scale.ordinal().range(['#3cbcbd', '#4abc81', '#dcd048', '#4dcc37']);

var dataset = [{
  "keyword": "Descriptive",
  'global': 70
}, {
  "keyword": "Inquisitive",
  'global': 60
}, {
  "keyword": "Predictive",
  'global': 47
}, {
  "keyword": "Prescriptive",
  'global': 44
}];
var total = 0;
dataset.forEach(function(d) {
  total += d.global;
});
var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
  .domain([0, 100])
  .range([h, 0]);
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .tickFormat(function(d) {
    return dataset[d].keyword;
  });
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(10);


var global = function(d) {
  return d.global;
};

var commaFormat = d3.format(".0%");
//SVG element
d3.select('svg#dippSVG').remove();
var svg = d3.select("#vertical_bar_chart_container")
  .append("svg")
  .attr('width', "80%")
  .attr('height', "80%")
  .attr("viewBox", "0 0 500 250")
  .attr("class", "vert_bar_chart_graph")
  .attr("id", "dippSVG")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Graph Bars
var sets = svg.selectAll(".set")
  .data(dataset)
  .enter()
  .append("g")
  .attr("class", "set")
  .attr("transform", function(d, i) {
    return "translate(" + xScale(i) + ",0)";
  })
  .on('mouseover', function(d) {
    var xPos = xScale(dataset.indexOf(d));
    var yPos = yScale(d.global);
    var div = d3.select('#tooltip')
      .style("left", xPos + "px")
      .style("top", yPos + "px")
      .style("opacity", 1)
      .html('<span>' + d.global + '</span>')


  })
  .on('mouseout', function() {
    var div = d3.select('#tooltip')
      .style("opacity", 0);
  });


sets.append("rect")
  .attr("class", "global")
  .attr("width", xScale.rangeBand() / 2)
  .attr('y', function(d) {
    return yScale((d.global / total) * 100);
  })
  .attr("height", function(d) {
    return h - yScale((d.global / total) * 100);
  })
  .attr('fill', function(d, i) {
    return color(d.global);
  })
  .append("text")
  .text(function(d) {
    return commaFormat((d.global / total) * 100);
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .on('mouseover', function(d) {
    var xPos = 70 + parseFloat(d3.select(this).attr('w'));
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() + 30;

    d3.select('#tooltip')
      .style('left', xPos + 'px')
      .style('top', yPos + 'px')
      .style('display', 'block')
      .select('#value')
      .text(d.global);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function() {
    d3.select('#tooltip').classed('hidden', true);
  })


function make_y_axis() { //function to make grid lines
  return d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10)
}

//append text
sets.append("text")
  .attr("class", "global")
  .attr("y", function(d) {
    return yScale((d.global / total) * 100) - (margin.top / 4);
  })
  .attr("dy", 5)
  .attr("dx", (xScale.rangeBand() / 8))
  .attr("font-family", "sans-serif")
  .attr("font-size", "14px")
  .attr("fill", "black")
  .text(function(d) {
    return (d.global > 0) ? commaFormat(d.global / total) : "";
  });

// xAxis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (h) + ")")
  .call(xAxis);
// yAxis
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0 ,0)")
  .call(yAxis);

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left + margin.top)
  .attr("x", 0 - (h / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Percentage of Tests");

//y axis grid line functions
svg.append("g")
  .attr("class", "grid")
  .call(make_y_axis()
    .tickSize(-w, 0, 0)
    .tickFormat("")
  )

＆＃13;

#tooltip {
  position: absolute;
  width: 50px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.indent {
  padding-left: 5px;
}

rect {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

rect:hover {
  fill: orange;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<div id="vertical_bar_chart_container"></div>

＆＃13;

为什么我的图表没有显示？

1 个答案: