Javascript D3将刻度“固定”到图表中的条形值？
我正在努力解决设置yAxis记号的问题，以便将记号固定到特定值。请容忍我的解释，我可能会屠宰d3术语 首先，我使用这个例子作为参考，所以也请参考 下面的图片或多或少地显示了我正在努力实现的目标： 我想将y比例设为百分比，并将12条红线显示为100%作为标签？并将其固定到灰色条的值。其他刻度也将标记为百分比，具有10%和20%的线性刻度。随着数据的变化，y轴值也将发生变化，并且100%标签将需要始终与灰色条值对应的数据对齐 把这当作一个参考值，然后我可以比较其他条，这些条可以超过100% 我不确定这是否有用，但设置y域的代码如下所示：Javascript D3将刻度“固定”到图表中的条形值？,javascript,d3.js,Javascript,D3.js,我正在努力解决设置yAxis记号的问题，以便将记号固定到特定值。请容忍我的解释，我可能会屠宰d3术语 首先，我使用这个例子作为参考，所以也请参考 下面的图片或多或少地显示了我正在努力实现的目标： 我想将y比例设为百分比，并将12条红线显示为100%作为标签？并将其固定到灰色条的值。其他刻度也将标记为百分比，具有10%和20%的线性刻度。随着数据的变化，y轴值也将发生变化，并且100%标签将需要始终与灰色条值对应的数据对齐 把这当作一个参考值，然后我可以比较其他条，这些条可以超过100% 我不确
y、 域[0，d3.maxdata，functioncatrie{return d3.maxcatrie.values，functiond{return d.value；}；}] 当前，传递给yAxis的y比例将数据值映射到svg维度 数据->svg维度 如果您注意到yAxis用实际数据值或您给定的刻度域标记其刻度 因此，您需要做的就是在其域中传递一个带有百分比的比例，该比例将转到svg维度： 百分比->svg维度 这里有两种方法可以做到这一点 1首先将数据转换为百分比，然后制作刻度。然后使用此比例进行打印并传递到轴 2不进行绘图，创建第三个比例以绘制地图 百分比->高度并将其传递给yAxis。请注意，这是有效的，因为比例都是线性的 修改您引用的示例时，我使用了第二种方法。我粘贴了完整的代码，并突出显示了我修改的部分。注：我将学生集中的中值灰条设置为100%
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x0)
.tickSize(0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.ordinal()
.range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);
var svg = d3.select('body').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
var categoriesNames = data.map(function(d) { return d.categorie; });
var rateNames = data[0].values.map(function(d) { return d.rate; });
//=========================================================================
//=========================================================================
// Modified code here
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
//data -> percent - using the Student value of Medium to set to 100%
let dataToPercent = d3.scale.linear()
.domain( [0, data[0].values.filter( d => d.rate === "Medium" )[0].value] )
.range( [ 0, 100 ] )
// percent -> height
// Third scale just to pass to yAxis
let percentToHeight = d3.scale.linear()
.domain( [0, d3.max(data, function(categorie) {
return d3.max(categorie.values, function(d) {
return dataToPercent( d.value ); //only change is dataToPercent( d.value ) versus original return of d.value
})
})])
.range( [ height, 0] )
// set the yAxis with our new scale - use tickFormat to add percentage sign
yAxis
.scale( percentToHeight )
.tickFormat( d => d + "%" )
//add the red line
svg.append( "line" )
.attr( "x1", 0 )
.attr( "y1", percentToHeight( 100 ))
.attr( "x1", width )
.attr( "y2", percentToHeight( 100 ))
.attr( "stroke", "red" )
.attr( "stroke-width", "2px" )
//===========================================================================
//===========================================================================
// End modified code
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(categorie) { return d3.max(categorie.values, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style('opacity','0')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style('font-weight','bold')
.text("Value");
svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');
var slice = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + x0(d.categorie) + ",0)"; });
slice.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.rate); })
.style("fill", function(d) { return color(d.rate) })
.attr("y", function(d) { return y(0); })
.attr("height", function(d) { return height - y(0); })
.on("mouseover", function(d) {
d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.rate));
});
slice.selectAll("rect")
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
//Legend
var legend = svg.selectAll(".legend")
.data(data[0].values.map(function(d) { return d.rate; }).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
.style("opacity","0");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; });
legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
});
</script>