个人中心
gpt4 book ai didi

javascript - d3.select ('svg' ).remove() 不删除图表

转载 作者：行者123 更新时间：2023-12-03 03:28:10 25 4
gpt4 key购买 nike

我有一个 Shiny 的应用程序，它将数据发送到 D3 脚本以构建双垂直图表。当数据刷新时，图表也必须更新。为此，我使用d3.select('svg').remove()。问题在于图表是相互叠加构建的。我已经包含了我正在使用的 JS 文件的可重现示例。这里我提供了一个静态数据集。

  <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    text{
        font-size:12px;
    }
    .mainBars rect{
      shape-rendering: auto;
      fill-opacity: 0;
      stroke-width: 0.5px;
      stroke: rgb(0, 0, 0);
      stroke-opacity: 0;
    }
    .subBars{
        shape-rendering:crispEdges;
    }
    .edges{
        stroke:none;
        fill-opacity:0.5;
    }
    .header{
        text-anchor:middle;
        font-size:16px;
    }
    line{
        stroke:grey;
    }
    </style>
    <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
    <script>

    var data=[['Lite','CA',16,0],
    ['Small','CA',1278,4],
    ['Medium','CA',27,0],
    ['Plus','CA',58,0],
    ['Grand','CA',1551,15],
    ['Elite','CA',141,0],
    ['Lite','AZ',5453,35],
    ['Small','AZ',683,1],
    ['Medium','AZ',862,0],
    ['Grand','AZ',6228,30],
    ['Lite','AL',15001,449],
    ['Small','AL',527,3],
    ['Medium','AL',836,0],
    ['Plus','AL',28648,1419],
    ['Grand','AL',3,0],
    ['Lite','CO',13,0],
    ['Small','CO',396,0],
    ['Medium','CO',362,0],
    ['Plus','CO',78,10],
    ['Grand','CO',2473,32],
    ['Elite','CO',2063,64],
    ['Medium','DE',203,0],
    ['Grand','DE',686,2],
    ['Elite','DE',826,0],
    ['Lite','KS',1738,110],
    ['Small','KS',12925,13],
    ['Medium','KS',15413,0],
    ['Small','GA',2166,2],
    ['Medium','GA',86,0],
    ['Plus','GA',348,3],
    ['Grand','GA',4244,18],
    ['Elite','GA',1536,1],
    ['Small','IA',351,0],
    ['Grand','IA',405,1],
    ['Small','IL',914,1],
    ['Medium','IL',127,0],
    ['Grand','IL',1470,7],
    ['Elite','IL',516,1],
    ['Lite','IN',43,0],
    ['Small','IN',667,1],
    ['Medium','IN',172,0],
    ['Plus','IN',149,1],
    ['Grand','IN',1380,5],
    ['Elite','IN',791,23],
    ['Small','FL',1,0],
    ['Grand','FL',1,0],
    ['Small','MD',1070,1],
    ['Grand','MD',1171,2],
    ['Elite','MD',33,0],
    ['Plus','TX',1,0],
    ['Small','MS',407,0],
    ['Medium','MS',3,0],
    ['Grand','MS',457,2],
    ['Elite','MS',20,0],
    ['Small','NC',557,0],
    ['Medium','NC',167,0],
    ['Plus','NC',95,1],
    ['Grand','NC',1090,5],
    ['Elite','NC',676,6],
    ['Lite','NM',1195,99],
    ['Small','NM',350,3],
    ['Medium','NM',212,0],
    ['Grand','NM',1509,8],
    ['Lite','NV',3899,389],
    ['Small','NV',147,0],
    ['Medium','NV',455,0],
    ['Plus','NV',1,1],
    ['Grand','NV',4100,16],
    ['Lite','OH',12,0],
    ['Small','OH',634,2],
    ['Medium','OH',749,0],
    ['Plus','OH',119,1],
    ['Grand','OH',3705,19],
    ['Elite','OH',3456,25],
    ['Small','PA',828,2],
    ['Medium','PA',288,0],
    ['Plus','PA',141,0],
    ['Grand','PA',2625,7],
    ['Elite','PA',1920,10],
    ['Small','SC',1146,2],
    ['Medium','SC',212,0],
    ['Plus','SC',223,4],
    ['Grand','SC',1803,6],
    ['Elite','SC',761,8],
    ['Small','TN',527,0],
    ['Medium','TN',90,0],
    ['Grand','TN',930,4],
    ['Elite','TN',395,1],
    ['Lite','ME',7232,58],
    ['Small','ME',1272,0],
    ['Medium','ME',1896,0],
    ['Plus','ME',1,0],
    ['Grand','ME',10782,33],
    ['Elite','ME',1911,3],
    ['Small','VA',495,0],
    ['Medium','VA',32,0],
    ['Plus','VA',7,0],
    ['Grand','VA',1557,12],
    ['Elite','VA',24,0],
    ['Small','WA',460,1],
    ['Plus','WA',88,3],
    ['Grand','WA',956,3],
    ['Small','WV',232,0],
    ['Medium','WV',71,0],
    ['Grand','WV',575,2],
    ['Elite','WV',368,3]
    ];
    d3.select('svg').remove();
    var color ={Elite:"#3366CC", Grand:"#DC3912",  Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};
    var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);

    svg.append("text").attr("x",250).attr("y",70)
        .attr("class","header").text("Sales Attempt");

    svg.append("text").attr("x",750).attr("y",70)
        .attr("class","header").text("Sales");

    var g =[svg.append("g").attr("transform","translate(150,100)")
            ,svg.append("g").attr("transform","translate(650,100)")];

    var bp=[ viz.bP()
            .data(data)
            .min(12)
            .pad(1)
            .height(600)
            .width(200)
            .barSize(35)
            .fill(d=>color[d.primary])
        ,viz.bP()
            .data(data)
            .value(d=>d[3])
            .min(12)
            .pad(1)
            .height(600)
            .width(200)
            .barSize(35)
            .fill(d=>color[d.primary])
    ];

    [0,1].forEach(function(i){
        g[i].call(bp[i])

        g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
        g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");

        g[i].append("line").attr("x1",-100).attr("x2",0);
        g[i].append("line").attr("x1",200).attr("x2",300);

        g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
        g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);

        g[i].selectAll(".mainBars")
            .on("mouseover",mouseover)
            .on("mouseout",mouseout);

        g[i].selectAll(".mainBars").append("text").attr("class","label")
            .attr("x",d=>(d.part=="primary"? -30: 30))
            .attr("y",d=>+6)
            .text(d=>d.key)
            .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));

        g[i].selectAll(".mainBars").append("text").attr("class","perc")
            .attr("x",d=>(d.part=="primary"? -100: 80))
            .attr("y",d=>+6)
            .text(function(d){ return d3.format("0.0%")(d.percent)})
            .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
    });

    function mouseover(d){
        [0,1].forEach(function(i){
            bp[i].mouseover(d);

            g[i].selectAll(".mainBars").select(".perc")
            .text(function(d){ return d3.format("0.0%")(d.percent)});
        });
    }
    function mouseout(d){
        [0,1].forEach(function(i){
            bp[i].mouseout(d);

            g[i].selectAll(".mainBars").select(".perc")
            .text(function(d){ return d3.format("0.0%")(d.percent)});
        });
    }
    d3.select(self.frameElement).style("height", "800px");
    </script>
    </body>
    </html>

我正在尝试删除 svg 元素，然后在新数据到达时再次重建它。这是正确的方法吗？

最佳答案

你尝试过吗:

d3.selectAll('svg').remove();

有关 D3.js 中 select 与 selectAll 的更多信息，请点击以下链接: Why are d3's select() and selectAll() behaving differently here?

关于javascript - d3.select ('svg' ).remove() 不删除图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46216264/

25 4 0
文章推荐： javascript - 函数内存在多个 'includes'
文章推荐： json - 如何计算主节点的投资返回率
文章推荐： wpf - Prism - 如何使用 MEF 在 ViewModel 中导入 IRegionManager
文章推荐： javascript - react 改变 Prop 巨大错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com