gpt4 book ai didi

d3.js - 具有平滑渐变和相应标签的图例

转载 作者:行者123 更新时间:2023-12-04 15:29:58 25 4
gpt4 key购买 nike

我正在为一些数据创建一个图例。

这是我的代码:Plunker .

问题是标签沿 x 均匀分布轴,而它们应遵循色标方案:

var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

这是我所拥有的:

enter image description here

这就是我想要的:

enter image description here

谢谢!

最佳答案

您需要设置要显示的刻度值,这可以通过以下方式完成:
axis.tickValues([value,value,...])
在您的情况下,您希望标记的值等于您的比例尺中的颜色中断。幸运的是,您已经有一个包含这些值的数组,即比例域:
axis.tickValues(colorScale.domain());
通过调整图例宽度(否则标签相当接近)并应用该更改,我们得到:

var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

// append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
.attr("width",600);
var defs = svgLegend.append('defs');

// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');

// horizontal gradient
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");

// append multiple color stops by using D3's data/enter step
linearGradient.selectAll("stop")
.data([
{offset: "0%", color: "#E28672"},
{offset: "10%", color: "#EC93AB"},
{offset: "15%", color: "#CEB1DE"},
{offset: "20%", color: "#95D3F0"},
{offset: "25%", color: "#77EDD9"},
{offset: "100%", color: "#A9FCAA"}
])
.enter().append("stop")
.attr("offset", function(d) {
return d.offset;
})
.attr("stop-color", function(d) {
return d.color;
});

// append title
svgLegend.append("text")
.attr("class", "legendTitle")
.attr("x", 0)
.attr("y", 20)
.style("text-anchor", "left")
.text("Legend title");

// draw the rectangle and fill with gradient
svgLegend.append("rect")
.attr("x", 10)
.attr("y", 30)
.attr("width", 400)
.attr("height", 15)
.style("fill", "url(#linear-gradient)");

//create tick marks
var xLeg = d3.scaleLinear()
.domain([0, 100])
.range([10, 400]);

var axisLeg = d3.axisBottom(xLeg)
.tickValues(colorScale.domain())

svgLegend
.attr("class", "axis")
.append("g")
.attr("transform", "translate(0, 40)")
.call(axisLeg);
.legendTitle {
font-size: 15px;
fill: #4F4F4F;
font-weight: 12;
}

.axis path, .axis line {
fill: none;
stroke: none; /*black;*/
shape-rendering: crispEdges;
}

.axis text {
font-family: Consolas, courier;
fill: #000;
font-size: 9pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


我还要指出,我们可以更进一步,并使用比例域为梯度附加停止点:

var colorScale = d3.scaleLinear()
.domain([0, 10, 15, 20, 25, 100])
.range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);

// append a defs (for definition) element to your SVG
var svgLegend = d3.select('body').append('svg')
.attr("width",600);
var defs = svgLegend.append('defs');

// append a linearGradient element to the defs and give it a unique id
var linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');

// horizontal gradient
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");

// append multiple color stops by using D3's data/enter step

linearGradient.selectAll("stop")
.data(colorScale.domain())
.enter().append("stop")
.attr("offset", function(d) {
return d+"%";
})
.attr("stop-color", function(d) {
return colorScale(d);
});

// append title
svgLegend.append("text")
.attr("class", "legendTitle")
.attr("x", 0)
.attr("y", 20)
.style("text-anchor", "left")
.text("Legend title");

// draw the rectangle and fill with gradient
svgLegend.append("rect")
.attr("x", 10)
.attr("y", 30)
.attr("width", 400)
.attr("height", 15)
.style("fill", "url(#linear-gradient)");

//create tick marks
var xLeg = d3.scaleLinear()
.domain([0, 100])
.range([10, 400]);

var axisLeg = d3.axisBottom(xLeg)
.tickValues(colorScale.domain())

svgLegend
.attr("class", "axis")
.append("g")
.attr("transform", "translate(0, 40)")
.call(axisLeg);
.legendTitle {
font-size: 15px;
fill: #4F4F4F;
font-weight: 12;
}

.axis path, .axis line {
fill: none;
stroke: none; /*black;*/
shape-rendering: crispEdges;
}

.axis text {
font-family: Consolas, courier;
fill: #000;
font-size: 9pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

关于d3.js - 具有平滑渐变和相应标签的图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49739119/

25 4 0