爲什麼我的圖表不顯示？

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值

您應該能夠從這裏繼續：

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("") 
 
)

#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; 
 
}

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