Fatal编程技术网
  • javascript/
  • Javascript 在一个屏幕上排列图形

Javascript 在一个屏幕上排列图形

javascript d3.js

Javascript 在一个屏幕上排列图形,javascript,d3.js,Javascript,D3.js,我想要四个图形并排线性排列，但它们保持重叠。我使用的是d3.js，我想并排画这四张图 我尝试在各自的svg标记中绘制每个图形，然后将它们组合在一起，但没有效果 <script> const svg = d3.select("svg"); const width = +svg.attr("width"); const height = +svg.attr("height"); var TelescopeD

我想要四个图形并排线性排列，但它们保持重叠。我使用的是d3.js，我想并排画这四张图

我尝试在各自的svg标记中绘制每个图形，然后将它们组合在一起，但没有效果

<script>
          const svg = d3.select("svg");
          const width = +svg.attr("width");
          const height = +svg.attr("height");

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

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

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

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

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

          var 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");
        </script>


const svg=d3.选择（“svg”）；
常量宽度=+svg.attr（“宽度”）；
常量高度=+svg.attr（“高度”）；
var伸缩数据=[
{平均值：2000，望远镜名称：“1米”}，
{平均值：3000，望远镜镜头：“1.9米”}，
{平均值：4000，望远镜名称：“Lesedi”}
];
var padding={top:40，right:20，bottom:30，left:75}；
const innerWidth=width-padding.left-padding.right；
const innerHeight=高度-padding.top-padding.bottom；
变量颜色=[“红色”、“黑色”、“绿色”]；
var yScale=d3
.scaleLinear（）
.domain（[0，d3.max（伸缩数据，d=>d.Average）]）
.范围（[innerHeight，0]）
.nice（）；
var xScale=d3
.scaleBand（）
.域名(
伸缩数据图（d=>{
返回d.collectane；
})
)
.range（[0，innerWidth]）
.填充（0.4）；
//xAxis
const xAxis=svg
.附加（“g”）
.classed（“xAxis”，真）
艾特先生(
“转化”，
`转换（${padding.left}，${innerHeight+padding.top}）`
)
.call（d3.axisBottom（xScale））；
//亚克斯
const yAxis=svg
.附加（“g”）
.classed（“yAxis”，真）
.attr（“transform”，`translate（${padding.left}，${padding.top}）`）
.call（d3.axisLeft（yScale））；
//现在添加数据
const rectGrp=svg
.附加（“g”）
.attr（“transform”，`translate（${padding.left}，${padding.top}）`）；
rectGrp
.selectAll（“rect”）
.数据（可伸缩数据）
.输入（）
.append（“rect”）
.attr（“宽度”，xScale.bandwidth（））
.attr（“高度”，（d，i）=>{
返回内部高度-Y刻度（d.平均值）；
})
.attr（“x”，d=>{
返回X刻度（d.E）；
})
.attr（“y”，函数（d）{
返回Y刻度（d.平均值）；
})
.attr（“填充”，（d，i）=>{
返回颜色[i]；
});
rectGrp
.append（“文本”）
.attr（“y”，-20）
.attr（“x”，50）
.文本（“季度平均值”）；
我希望看到这里附加的代码用于与第一个图形并排绘制其他3个图形

您是否希望在屏幕上并排显示四个图形

这就是您的问题所暗示的，没有示例说明您希望输出是什么样子。另一个选择是，如何将四个图合并为一个图，这是一个完全不同的问题

下面是一个非常简单的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>



例子
函数绘图图（elementId）{
const svg=d3.select（elementId）；
常量宽度=+svg.attr（“宽度”）；
常量高度=+svg.attr（“高度”）；
设伸缩数据=[
{平均值：2000，望远镜名称：“1米”}，
{平均值：3000，望远镜镜头：“1.9米”}，
{平均值：4000，望远镜名称：“Lesedi”}
];
让padding={top:40，right:20，bottom:30，left:75}；
const innerWidth=width-padding.left-padding.right；
const innerHeight=高度-padding.top-padding.bottom；
让颜色=[“红”、“黑”、“绿”]；
设yScale=d3
.scaleLinear（）
.domain（[0，d3.max（伸缩数据，d=>d.Average）]）
.范围（[innerHeight，0]）
.nice（）；
设xScale=d3
.scaleBand（）
.域名(
伸缩数据图（d=>{
返回d.collectane；
})
)
.range（[0，innerWidth]）
.填充（0.4）；
//xAxis
const xAxis=svg
.附加（“g”）
.classed（“xAxis”，真）
.attr（“transform”，`translate（${padding.left}，${innerHeight+padding.top}）`）
.call（d3.axisBottom（xScale））；
//亚克斯
const yAxis=svg
.附加（“g”）
.classed（“yAxis”，真）
.attr（“transform”，`translate（${padding.left}，${padding.top}）`）
.call（d3.axisLeft（yScale））；
//现在添加数据
const rectGrp=svg
.附加（“g”）
.attr（“transform”，`translate（${padding.left}，${padding.top}）`）；
rectGrp
.selectAll（“rect”）
.数据（可伸缩数据）
.输入（）
.append（“rect”）
.attr（“宽度”，xScale.bandwidth（））
.attr（“高度”，（d，i）=>{
返回内部高度-Y刻度（d.平均值）；
})
.attr（“x”，d=>{
返回X刻度（d.E）；
})
.attr（“y”，函数（d）{
返回Y刻度（d.平均值）；
})
.attr（“填充”，（d，i）=>{
返回颜色[i]；
});
rectGrp
.append（“文本”）
.attr（“y”，-20）
.attr（“x”，50）
.文本（“季度平均值”）；
}
绘图图（“#testsvg1”）；
绘图图（“#testsvg2”）；
绘图图（“testsvg3”）；
绘图（“testsvg4”）；
您想要四个图形吗