Question

我希望并排线性绘制四个图，但它们保持重叠。我正在使用d3.js，我想并排绘制这四个图。

我尝试在每个图上绘制自己的svg标签，然后将它们组合在一起，但这是行不通的。

for ax in axes:
    ax.set_xlabel(fontsize='large', fontweight='bold')

我希望看到此处附带的代码可用于与第一个图形同时绘制另外三个图形

Answer 1

是否要在屏幕上并排显示四个图形？

这似乎是您的问题所隐含的含义，而没有提供您希望输出看起来像什么的示例。另一个选择是如何将四个图合并为一个图，这是一个完全不同的问题。

这是一个非常简单的HTML文档，它将四个图形并排显示在屏幕上。我认为您的问题可能是您正在使用SVG选择器选择要绘制的元素，而不是为每个不同的元素分配ID，然后选择每个元素的ID。

<html>
<head>
    <title>Example</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
    function drawGraph(elementId) {
            const svg = d3.select(elementId);
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        let TelescopeData = [
            { Average: 2000, TelescopeName: "1 meter" },
            { Average: 3000, TelescopeName: "1.9 meter" },
            { Average: 4000, TelescopeName: "Lesedi" }
        ];

        let padding = { top: 40, right: 20, bottom: 30, left: 75 };

        const innerWidth = width - padding.left - padding.right;
        const innerHeight = height - padding.top - padding.bottom;

        let colors = ["red", "black", "green"];

        let yScale = d3
            .scaleLinear()
            .domain([0, d3.max(TelescopeData, d => d.Average)])
            .range([innerHeight, 0])
            .nice();

        let xScale = d3
            .scaleBand()
            .domain(
                TelescopeData.map(d => {
                return d.TelescopeName;
                })
            )
            .range([0, innerWidth])
            .padding(0.4);

        //xAxis
        const xAxis = svg
            .append("g")
            .classed("xAxis", true)
            .attr("transform",`translate(${padding.left},${innerHeight + padding.top})`)
            .call(d3.axisBottom(xScale));

        //yAxis
        const yAxis = svg
            .append("g")
            .classed("yAxis", true)
            .attr("transform", `translate(${padding.left},${padding.top})`)
            .call(d3.axisLeft(yScale));

        // now adding the data

        const rectGrp = svg
            .append("g")
            .attr("transform", `translate(${padding.left},${padding.top})`);
        rectGrp
            .selectAll("rect")
            .data(TelescopeData)
            .enter()
            .append("rect")
            .attr("width", xScale.bandwidth())
            .attr("height", (d, i) => {
                return innerHeight - yScale(d.Average);
            })
            .attr("x", d => {
                return xScale(d.TelescopeName);
            })
            .attr("y", function(d) {
                return yScale(d.Average);
            })
            .attr("fill", (d, i) => {
                return colors[i];
            });
        rectGrp
            .append("text")
            .attr("y", -20)
            .attr("x", 50)
            .text("Quarterly Average");
    }
    drawGraph("#testsvg1");
    drawGraph("#testsvg2");
    drawGraph("#testsvg3");
    drawGraph("#testsvg4");
    </script>
</head>
<body>
    <svg id="#testsvg1" width="200" height="200"></svg>
    <svg id="#testsvg2" width="200" height="200"></svg>
    <svg id="#testsvg3" width="200" height="200"></svg>
    <svg id="#testsvg4" width="200" height="200"></svg>
</body>
</html>

在一个屏幕上排列图形

1 个答案: