我正在尝试在d3 js的小节顶部显示值。 有一个X轴滚动条，其中包含诸如缩略图之类的子栏。 当我滚动x轴时，这些值没有改变。 而且X轴使用拖动功能进行滚动，如何在X轴滚动条中添加点击功能？
这是我尝试过的codepen：https://codepen.io/sampath-PerOxide/pen/MZBOmG
var ds1 = [
{label:"Company Average", value:"20"},
{label:"Banking & Finance", value:"10"},
{label:"Research & Development", value:"40"},
{label:"Design & Innovaon", value:"20"},
{label:"Sales & Marketing", value:"10"},
{label:"Company Average1", value:"20"},
{label:"Banking & Finance1", value:"10"},
{label:"Research & Development1", value:"40"},
{label:"Design & Innovaon1", value:"20"},
{label:"Sales & Marketing1", value:"10"},
{label:"Company Average2", value:"20"},
{label:"Banking & Finance2", value:"10"},
{label:"Research & Development2", value:"40"},
{label:"Design & Innovaon2", value:"20"},
{label:"Sales & Marketing2", value:"10"},
{label:"Company Average3", value:"20"},
{label:"Banking & Finance3", value:"10"},
{label:"Research & Development3", value:"40"},
{label:"Design & Innovaon3", value:"20"},
{label:"Sales & Marketing3", value:"10"},
{label:"Company Average4", value:"20"},
{label:"Banking & Finance4", value:"10"},
{label:"Research & Development4", value:"40"},
{label:"Design & Innovaon4", value:"20"},
{label:"Sales & Marketing4", value:"10"},
{label:"Company Average5", value:"20"},
{label:"Banking & Finance5", value:"10"},
{label:"Research & Development5", value:"40"},
{label:"Design & Innovaon5", value:"20"},
{label:"Sales & Marketing5", value:"10"},
];
var ds2 = [
{label:"Company Average", value:"10"},
{label:"Banking & Finance", value:"30"},
{label:"Research & Development", value:"20"},
{label:"Design & Innovaon", value:"40"},
{label:"Sales & Marketing", value:"10"},
{label:"Company Average1", value:"30"},
{label:"Banking & Finance1", value:"20"},
{label:"Research & Development1", value:"40"},
{label:"Design & Innovaon1", value:"20"},
{label:"Sales & Marketing1", value:"10"},
{label:"Company Average2", value:"20"},
{label:"Banking & Finance2", value:"10"},
{label:"Research & Development2", value:"40"},
{label:"Design & Innovaon2", value:"20"},
{label:"Sales & Marketing2", value:"10"},
{label:"Company Average3", value:"20"},
{label:"Banking & Finance3", value:"10"},
{label:"Research & Development3", value:"40"},
{label:"Design & Innovaon3", value:"20"},
{label:"Sales & Marketing3", value:"10"},
{label:"Company Average4", value:"20"},
{label:"Banking & Finance4", value:"10"},
{label:"Research & Development4", value:"40"},
{label:"Design & Innovaon4", value:"20"},
{label:"Sales & Marketing4", value:"10"},
{label:"Company Average5", value:"20"},
{label:"Banking & Finance5", value:"10"},
{label:"Research & Development5", value:"40"},
{label:"Design & Innovaon5", value:"20"},
{label:"Sales & Marketing5", value:"10"},
];
var ds3 = [
{label:"Company Average", value:"40"},
{label:"Banking & Finance", value:"10"},
{label:"Research & Development", value:"30"},
{label:"Design & Innovaon", value:"10"},
{label:"Sales & Marketing", value:"20"},
{label:"Company Average1", value:"30"},
{label:"Banking & Finance1", value:"5"},
{label:"Research & Development1", value:"30"},
{label:"Design & Innovaon1", value:"20"},
{label:"Sales & Marketing1", value:"10"},
{label:"Company Average2", value:"20"},
{label:"Banking & Finance2", value:"10"},
{label:"Research & Development2", value:"40"},
{label:"Design & Innovaon2", value:"20"},
{label:"Sales & Marketing2", value:"10"},
{label:"Company Average3", value:"20"},
{label:"Banking & Finance3", value:"10"},
{label:"Research & Development3", value:"40"},
{label:"Design & Innovaon3", value:"20"},
{label:"Sales & Marketing3", value:"10"},
{label:"Company Average4", value:"20"},
{label:"Banking & Finance4", value:"10"},
{label:"Research & Development4", value:"40"},
{label:"Design & Innovaon4", value:"20"},
{label:"Sales & Marketing4", value:"10"},
{label:"Company Average5", value:"20"},
{label:"Banking & Finance5", value:"10"},
{label:"Research & Development5", value:"40"},
{label:"Design & Innovaon5", value:"20"},
{label:"Sales & Marketing5", value:"10"},
];
var margin = {top: 20, right: 10, bottom: 20, left: 40};
var marginOverview = {top: 30, right: 10, bottom: 20, left: 40};
var selectorHeight = 40;
var width = 1100 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom - selectorHeight;
var heightOverview = 80 - marginOverview.top - marginOverview.bottom;
var svg = d3.select("#atthbd").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + selectorHeight);
var diagram = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function updateLegend(data) {
var maxLength = d3.max(data.map(function(d){ return d.label.length}))
var barWidth = maxLength * 7;
var numBars = Math.round(width/barWidth);
var isScrollDisplayed = barWidth * data.length > width;
console.log(isScrollDisplayed)
var xscale = d3.scale.ordinal()
.domain(data.slice(0,numBars).map(function (d) { return d.label; }))
.rangeBands([0, width], .7);
var yscale = d3.scale.linear()
.domain([0, 40])
.range([height, 0]);
var xAxis = d3.svg.axis().scale(xscale).orient("bottom");
var yAxis = d3.svg.axis().scale(yscale).orient("left");
var tip2 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d2) {
return "<p class='sec-sub-head'>Avg No.of days:" + d2.value + "</p>";
})
svg.call(tip2);
diagram.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
diagram.append("g")
.attr("class", "y axis")
.call(yAxis) .append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Average No. of days");
/*
*/
var bars = diagram.append("g");
bars.selectAll("rect")
.data(data.slice(0, numBars), function (d) {return d.label; })
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return xscale(d.label); })
.attr("y", function (d) { return yscale(d.value); })
.attr("width", xscale.rangeBand())
.attr("height", function (d) { return height - yscale(d.value); })
.on('mouseover', tip2.show)
.on('mouseout', tip2.hide)
;
bars.selectAll("bars")
.data(data.slice(0, numBars), function (d) {return d.label; })
.enter().append("text")
.attr("class", "bar")
.attr("text-anchor", "middle")
.attr("x", function(d) { return xscale(d.label) + xscale.rangeBand()/2; })
.attr("y", function(d) { return yscale(d.value) - 5; })
.text(function(d) { return d.value; });
if (isScrollDisplayed)
{
var xOverview = d3.scale.ordinal()
.domain(data.map(function (d) { return d.label; }))
.rangeBands([0, width], .2);
yOverview = d3.scale.linear().range([heightOverview, 0]);
yOverview.domain(yscale.domain());
var subBars = diagram.selectAll('.subBar')
.data(data)
subBars.enter().append("rect")
.classed('subBar', true)
.attr({
height: function(d) {
return heightOverview - yOverview(d.value);
},
width: function(d) {
return xOverview.rangeBand()
},
x: function(d) {
return xOverview(d.label);
},
y: function(d) {
return height + heightOverview + yOverview(d.value)
}
})
var displayed = d3.scale.quantize()
.domain([0, width])
.range(d3.range(data.length));
diagram.append("rect")
.attr("transform", "translate(0, " + (height + margin.bottom) + ")")
.attr("class", "mover")
.attr("x", 0)
.attr("y", 0)
.attr("height", selectorHeight)
.attr("width", Math.round(parseFloat(numBars * width)/data.length))
.attr("pointer-events", "all")
.attr("cursor", "ew-resize")
.call(d3.behavior.drag().on("drag", display))
;
}
function createsGrid(data) {
var grid = gridLine.selectAll("line.horizontalGrid").data(scaleY.ticks());
grid.enter()
.append("line")
.attr("class","horizontalGrid");
grid.exit().remove();
grid.attr({
"x1":0,
"x2": width,
"y1": function (d) { return yscale(d); },
"y2": function (d) { return yscale(d); }
});
}
function display () {
var x = parseInt(d3.select(this).attr("x")),
nx = x + d3.event.dx,
w = parseInt(d3.select(this).attr("width")),
f, nf, new_data, rects;
if ( nx < 0 || nx + w > width ) return;
d3.select(this).attr("x", nx);
f = displayed(x);
nf = displayed(nx);
if ( f === nf ) return;
new_data = data.slice(nf, nf + numBars);
xscale.domain(new_data.map(function (d) { return d.label; }));
diagram.select(".x.axis").call(xAxis);
rects = bars.selectAll("rect")
.data(new_data, function (d) {return d.label; });
rects.attr("x", function (d) { return xscale(d.label); });
// rects.attr("transform", function(d) { return "translate(" + xscale(d.label) + ",0)"; })
rects.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return xscale(d.label); })
.attr("y", function (d) { return yscale(d.value); })
.attr("width", xscale.rangeBand())
.attr("height", function (d) { return height - yscale(d.value); })
.on('mouseover', tip2.show)
.on('mouseout', tip2.hide)
;
/*
bars.selectAll(".bars")
.data(data)
.enter().append("text")
.attr("class", "bar")
.attr("text-anchor", "middle")
.attr("x", function(d) { return xscale(d.label) + xscale.rangeBand()/2; })
.attr("y", function(d) { return yscale(d.value) - 5; })
.text(function(d) { return d.value; });
*/
rects.exit().remove();
};
}
// generate initial legend
updateLegend(ds1);
// handle on click event
d3.select('#opts')
.on('change', function() {
$( "svg g" ).empty();
var data = eval(d3.select(this).property('value'));
updateLegend(data);
});
即使在SVG滚动和水平网格线之后，如何在条形顶部显示值。