当父 g 设置为高度时，SVG g 隐藏

Question

我对 SVG 比较陌生。我正在绘制一个图表，它将分别在 x、y 轴上动态绘制温度或风值。我擅长 x 轴定位。

但是当谈到 Y 轴时，位置是正确的，但是如果该值高于父图表高度，它会被切断，如图所示。

需要有关如何强制使圆形/元素可见的帮助，即使它超过了父元素的宽度或高度？

以下是标记的生成方式

我为此使用 d3.js。

这里是用文字生成圆圈的代码

  let svg = container
            .append("svg")
            .attr("width", width)
            .attr("height", height+(height*0.7));

        const chart = svg
            .append("g")
            .attr('class','chartwind')
            .attr("transform", "translate(" + padding.left + "," + (padding.top)  + ")")
 chart.append("path")
                .data(datapoints)
                .attr("class", "line wind-line")
                .style("stroke", colorScale("wind"))
                .style('stroke-width', '2px')
                .attr("d", windLine)

            let windPoint = chart.selectAll('g.windpoint').data(datapoints).enter().append('g').attr('class', 'windpoint').attr('transform', function (d) {
                return 'translate(' + (Math.round(xScale(d.parsedUtcDateTimeNow)) - 10) + ',' + yScale(d.windSpeed) + ')';
            })

            chart.selectAll('.windcircle')
                .data(Infos)
                .enter().append('circle')
                .attr("class", "windcircle")
                .style("stroke", colorScale("wind"))
                .style('stroke-width', '2px')
                .attr("cx", (d) => xScale(d.parsedUtcDateTimeNow))
                .attr("cy", (d) => {
                    return yScale(d.windSpeed);
                })
                .attr('r', 3)
                .style("fill", colorScale("wind"))

            windPoint
                .append('circle')
                .attr("cx", 0)
                .attr("cy", 0)
                .attr("r", function (d) {
                        return 8;
                })
                .attr("fill", "green")
                .attr("transform", "translate(0,-23)")

            windPoint
                .append('text')
                .attr("fill", "white")
                .attr("transform", "translate(0,-19)")
                .attr("text-anchor", "middle")
                .attr("font-size", "12px")
                .attr("font-weight", "600")
                .text((d) => {
                        return d.windGust;
                });

            windPoint
                .append('text')
                .attr('text-anchor', 'middle')
                //.attr("transform","translate(0,5)")
                .text((d) => {
                    return d.windSpeed;
                });

更新

---

这就是我构建 SVG 高度和宽度的方式

 function getSizesById(id) {
        const container = document.querySelector(`#${id}`)
    
        if (!container)
            return null
    
        return {
            height: container.clientHeight,
            width: container.clientWidth,
        }
    }
            const { width, height } = (() => {
                return getSizesById(containerID)
            })()
  const { width, height } = (() => {
            return getSizesById(containerID)
        })(),

            padding = {
                ...size.padding,
                top: 20,
                bottom: 20
            },
            chartHeight = height - padding.bottom - padding.top,
            chartWidth = width - padding.left - padding.right
     

        const container = d3.select(`#${containerID}`)
    let svg = container
                .append("svg")
                .attr("width", width)
                .attr("height", height);

注意：SVG 高度（或图表）应该在 DIV 中查看，并且只有当数据点超过比例时，我们才需要数据在 div 高度上可见。

Answer 1

<g> 元素没有任何固有大小。它们只是一组标记标签的逻辑包装器，也是为它们提供一些通用属性的地方。限制图表可见部分的是<svg> 元素。

您的代码显示每个数据点都由跨越(-8 -31 16 35)（左-上-宽-高）边界框的图形元素表示。这是显示所有内容所需的空间。

从您的.chartwind 组中删除transform 属性。显示完整图表所需的空间是

• 左：xScale 范围的下限 - 8
• top：yScale 范围的下边界 - 31（在向下坐标系中）
• 宽度：xScale 范围的范围加上 16
• 高度：yScale 范围的范围加上 35

如果你愿意，可以添加一些填充。

将带有这四个数字的viewBox 属性添加到<svg> 元素：viewbox="<left> <top> <width> <height>"。然后，这样描述的区域将被安装在 <svg> 元素的可用空间内，而无需您进行任何进一步的转换。