我試圖為這個多線圖創建一個圖例，這將是一條直線，那么如何根據之前分組的專案寬度來計算分組專案的轉換翻譯值呢？
<g class=" legend">
< g class="legend-group" transform="translate(0, 0)">
< rect x="0" y="0" width="12" height="12" style="fill: 紅色"/>
<text x="16。 79999"/span> y="6"/span> text- anchor="left" style="alignment-baseline: middle">Text 1</text>/span>
</g>/span>
< g class="legend-group" transform="translate（120，0）">
< rect x="0" y="0" width="12" height="12" style="fill: 綠色"/>
<text x="16。 79999"/span> y="6"/span> text- anchor="left" style="alignment-baseline: middle">Text 2</text>/span>
</g>/span>
< g class="legend-group" transform="translate（240，0）">
< rect x="0" y="0" width="12" height="12" style="fill: 紅色"/>
<text x="16。 79999"/span> y="6"/span> text- anchor="left" style="alignment-baseline: middle">Text 3 - Long Texttttt</text>/span>
</g>/span>
</g>/span>
在這里，這些文本的長度是不同的，所以給所有傳說組一個固定的寬度是行不通的，什么是最好的解決方案，這是代碼，有沒有更好的方法來做這個？
let {data} = this.props。
size = 12,
width = 120;
let legendGroup = select(node)
.selectAll(' .legend-group')
.data(data)
.enter()
.append('g'/span>)
.class('class', ' legend-group')
.attr('transform', function(d, i) {
return `translate(${width * i}, 0)`/span>
});
圖例組
.append('rect'/span>)
.attr('x', 0)
.attr('y', 0)
.attr('width', size)
.attr('height', size)
.style('fill', d => d.color) 。
圖例組
.append('text')
.attr('x', size * 1.4)
.attr('y', size/ 2)
.text(d => d.name)
.attr('text-anchor', 'left')
.style('alignment-baseline', 'middle')
uj5u.com熱心網友回復：
這里有一個例子，獲得每個組的寬度，并使用它來設定位置。
。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">/span>
<script src="https://d3js. org/d3.v7.js"></script>
</head>
<body>
<div id="圖表"> </div>>
<script>
//span>標準保證金慣例設定
const margin = { top: 5, bottom: 5, left: 5, right: 5 };
const width = 500 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const svg = d3.select('#chart')
.append('svg')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom)
.attr('font-family', 'sans-serif') 。
const g = svg.append('g')
.attr('transform', `translate(${margin. left},${margin.top})`）。)
//color scale
const color = d3.scaleOrdinal()
.domain(['Label 1', 'much much much long label 2', 'Label 3'])
.range（d3.schemeCategory10）。
// color legend
const legend = g.append('g')
.attr('font-family', 'sans-serif') 。
//為色標中的每個條目創建一個g。
const cell = legend.selectAll('g')
.data(color.domain))
.join('g') 。
const squareSize = 14;
//為每個條目添加彩色的方塊。
cell.append('rect')
.attr('fill', d => color(d)
.attr('width', squareSize)
.attr('height', squareSize)
//為每個條目添加文本標簽。
cell.append('text')
.attr('dominant-baseline', 'middle')
.attr('x', squareSize * 1.5)
.attr('y', squareSize / 2)
.text(d => d)。
//span>定位單元格。
let xPosition = 0;
cell.each(function(d, i) {
d3.select(this)
.attr('transform', `translate(${xPosition})`) 。
xPosition = (this.getBBox().width squareSize) 。
});
</script>>
</body>
</html>/span>另外，您也可以使用HTML來創建圖例。然后你可以利用 Flexbox 來定位圖例條目。
。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">/span>
<script src="https://d3js. org/d3.v7.js"></script>
</head>
<body>
<div id="圖表"> </div>>
<script>
//color scale
const color = d3.scaleOrdinal()
.domain(['Label 1', 'much much much long label 2', 'Label 3'])
.range（d3.schemeCategory10）。
//color legend=彩色圖例。
//為圖例創建div。
const legend = d3.select('#chart')
.append('div')
.style('display', 'flex')
.style('font-family', 'sans-serif') 。
//為色標中的每個條目創建一個div。
const cell = legend.selectAll('div')
.data(color.domain))
.join('div')
.style('margin-right', '1em')
.style('display', 'flex')
.style('align-items', 'center') 。
//為每個條目添加彩色的方塊。
cell.append('div')
.style('background', d => color(d)
.style('min-width'/span>, '14px'/span>)
.style('min-height'/span>, '14px')
.style('margin-right'，'0.5em')。
//為每個條目添加文本標簽。
cell.append('div')
.text(d => d)。
</script>
</body>
</html>/span>或者，如果圖例需要在SVG元素中，那么你可以把HTML放在一個<foreignObject>里面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">/span>
<script src="https://d3js. org/d3.v7.js"></script>
</head>
<body>
<div id="圖表"> </div>>
<script>
//span>標準保證金慣例設定
const margin = { top: 5, bottom: 5, left: 5, right: 5 };
const width = 500 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const svg = d3.select('#chart')
.append('svg')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom)
.attr('font-family', 'sans-serif') 。
const g = svg.append('g')
.attr('transform', `translate(${margin. left},${margin.top})`）。)
//color scale
const color = d3.scaleOrdinal()
.domain(['Label 1', 'much much much long label 2', 'Label 3'])
.range（d3.schemeCategory10）。
// color legend
const legend = g.append('g')
.append(' foreignObject')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', 20)
.append('xhtml:div')
.style('display', 'flex')
.style('font-family', 'sans-serif') 。
//為色標中的每個條目創建一個div。
const cell = legend.selectAll('div')
.data(color.domain))
.join('div')
.style('margin-right', '1em')
.style('display', 'flex')
.style('align-items', 'center') 。
//為每個條目添加彩色的方塊。
cell.append('div')
.style('background', d => color(d)
.style('min-width'/span>, '14px'/span>)
.style('min-height'/span>, '14px')
.style('margin-right'，'0.5em')。
//為每個條目添加文本標簽。
cell.append('div')
.text(d => d)。
</script>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320667.html
標籤：