javascript - d3.js:进入-更新-退出模式

javascript - d3.js:进入-更新-退出模式 - 旧点未删除

转载作者：行者123 更新时间：2023-11-29 10:58:37

我正在尝试在下面的这张图中执行进入-更新-退出模式(这是在 SO 的一些非常善良的人的巨大帮助下构建的，但不幸的是我现在再次陷入困境。我无法使模式工作但是我确定我选择了正确的对象(在下面的代码中名为 heatDotsGroup)。

不过，我可以在 Chrome 的开发人员工具中检查该对象是否包含节点(省略号)，但该模式不起作用，因此很明显我做错了什么。

有什么想法吗？非常感谢!

function heatmap(dataset) {
    
    var svg = d3.select("#chart")
        .select("svg")
    
    var xLabels = [],
        yLabels = [];
    for (i = 0; i < dataset.length; i++) {
        if (i==0){
            xLabels.push(dataset[i].xLabel);
            var j = 0;
            while (dataset[j+1].xLabel == dataset[j].xLabel){
                yLabels.push(dataset[j].yLabel);
                j++;
            }
            yLabels.push(dataset[j].yLabel);
        } else {
            if (dataset[i-1].xLabel == dataset[i].xLabel){
                //do nothing
            } else {
                xLabels.push(dataset[i].xLabel);                    
            }
        }
    };

    var margin = {top: 0, right: 25,
                  bottom: 60, left: 75};  

    var width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;

    var dotSpacing = 0,
        dotWidth = width/(2*(xLabels.length+1)),
        dotHeight = height/(2*yLabels.length);

    var daysRange = d3.extent(dataset, function (d) {return d.xKey}),
        days = daysRange[1] - daysRange[0];
    
    var hoursRange = d3.extent(dataset, function (d) {return d.yKey}),
        hours = hoursRange[1] - hoursRange[0];    
    
    var tRange = d3.extent(dataset, function (d) {return d.val}),
        tMin = tRange[0],
        tMax = tRange[1];

    var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
    
    // the scale
    var scale = {
        x: d3.scaleLinear()
           .range([-1, width]),
        y: d3.scaleLinear()
           .range([height, 0]),
    };
    
    var xBand = d3.scaleBand().domain(xLabels).range([0, width]),
        yBand = d3.scaleBand().domain(yLabels).range([height, 0]);
    
    var axis = {
        x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
        y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
    };


    function updateScales(data){
        scale.x.domain([0, d3.max(data, d => d.xKey)]),
        scale.y.domain([ 0, d3.max(data, d => d.yKey)])
    }

    var colorScale = d3.scaleQuantile()
        .domain([0, colors.length - 1, d3.max(dataset, function (d) {return d.val;})])
        .range(colors);

    var zoom = d3.zoom()
        .scaleExtent([1, dotHeight])
        .on("zoom", zoomed);

    var tooltip = d3.select("body").append("div")
        .attr("id", "tooltip")
        .style("opacity", 0);

    // SVG canvas
    svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(zoom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Clip path
    svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height+dotHeight);


    // Heatmap dots
    var heatDotsGroup = svg.append("g")
        .attr("clip-path", "url(#clip)")
        .append("g");
        

    //Create X axis
    var renderXAxis = svg.append("g")
        .attr("class", "x axis")
        //.attr("transform", "translate(0," + scale.y(-0.5) + ")")
        //.call(axis.x)

    //Create Y axis
    var renderYAxis = svg.append("g")
        .attr("class", "y axis")
        .call(axis.y);


    function zoomed() {
        d3.event.transform.y = 0;
        d3.event.transform.x = Math.min(d3.event.transform.x, 5);
        d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
        // console.log(d3.event.transform)

        // update: rescale x axis
        renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));

        // Make sure that only the x axis is zoomed
        heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
    }
    
    svg.call(renderPlot, dataset)
    
    function renderPlot(selection, dataset){
        
        //Do the axes
        updateScales(dataset)
        selection.select('.y.axis').call(axis.y)
        selection.select('.x.axis')
                .attr("transform", "translate(0," + scale.y(-0.5) + ")")
                .call(axis.x)
           
        
        // Do the chart
        const update = heatDotsGroup.selectAll("ellipse")
        .data(dataset);
        
        update
        .enter()
        .append("ellipse")
        .attr("cx", function (d) {return scale.x(d.xKey) - xBand.bandwidth();})
        .attr("cy", function (d) {return scale.y(d.yKey) + yBand.bandwidth();})
        .attr("rx", dotWidth)
        .attr("ry", dotHeight)
        .attr("fill", function (d) {
            return colorScale(d.val);}
            )
        .merge(update).transition().duration(800);   
        
        update.exit().remove();
        
    }


};

#clickMe{
    height:50px;
    width:150px;
    background-color:lavender;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    
    <title>Heatmap Chart</title>

    <!-- Reference style.css -->
    <!--    <link rel="stylesheet" type="text/css" href="style.css">-->

    <!-- Reference minified version of D3 -->
    <script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='heatmap_v4.js' type='text/javascript'></script>
</head>

<body>
<input id="clickMe" type="button" value="click me to push new data" onclick="run();" />

    <div id='chart'>
    <svg width="700" height="500">
      <g class="focus">
        <g class="xaxis"></g>
        <g class="yaxis"></g>
      </g>
    </svg>
   </div>
    
   
    <script>
        function run() {
            var dataset = [];
                for (let i = 1; i < 360; i++) { //360
                    for (j = 1; j < 7; j++) {  //75
                        dataset.push({
                            xKey: i,
                            xLabel: "xMark " + i,
                            yKey: j,
                            yLabel: "yMark " + j,
                            val: Math.random() * 25,
                        })
                        }
                    };

                    heatmap(dataset)
        }

        $(document).ready(function() {});
    </script>
</body>

</html>

最佳答案

问题是您每次运行进入/退出/更新周期时都没有使用相同的选择。当按钮被按下时你:

生成新数据
运行热图函数
热图函数选择 svg 并附加一个名为 heatDotsGroup 的新 g
调用更新函数并将新创建的g作为选择传递
enter 循环追加所有内容，因为新的 g 是空的。

因此，exit 和 udpate 循环都是空的。尝试:

console.log(update.size(),update.exit().size()) // *Without any merge*

你应该看到每次更新都是空的。这是因为每次都输入了所有元素，这就是为什么每次更新都会增加省略号的数量。

我已经从热图函数中取出了一堆变量声明和追加语句，这些东西只需要运行一次(我可以走得更远，但我只做了最少的)。我还合并了您的更新并在设置属性之前输入选择(因为我们希望在更新时设置新属性)。下面的代码片段应该演示此更改。

在代码片段中，按下按钮会发生以下情况:

生成新数据
运行热图函数
热图函数选择现有的选择并且不附加任何新内容
调用更新函数并传递包含任何现有节点的先前更新/进入/退出周期使用的选择。
更新功能根据现有节点根据需要进入/退出/更新元素。

这是一个基于以上内容的工作版本:

// Things to set/append once:
var svg = d3.select("#chart")
  .select("svg")

var margin = {top: 0, right: 25,bottom: 60, left: 75};  
var width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom;
  
svg = svg.attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var clip = svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")


var heatDotsGroup = svg.append("g")
  .attr("clip-path", "url(#clip)")
  .append("g");

var xAxis = svg.append("g").attr("class", "x axis");
var yAxis = svg.append("g").attr("class", "y axis")
     

        
function heatmap(dataset) {
    
    
    var xLabels = [],
        yLabels = [];
    for (i = 0; i < dataset.length; i++) {
        if (i==0){
            xLabels.push(dataset[i].xLabel);
            var j = 0;
            while (dataset[j+1].xLabel == dataset[j].xLabel){
                yLabels.push(dataset[j].yLabel);
                j++;
            }
            yLabels.push(dataset[j].yLabel);
        } else {
            if (dataset[i-1].xLabel == dataset[i].xLabel){
                //do nothing
            } else {
                xLabels.push(dataset[i].xLabel);                    
            }
        }
    };



    var dotSpacing = 0,
        dotWidth = width/(2*(xLabels.length+1)),
        dotHeight = height/(2*yLabels.length);

    var daysRange = d3.extent(dataset, function (d) {return d.xKey}),
        days = daysRange[1] - daysRange[0];
    
    var hoursRange = d3.extent(dataset, function (d) {return d.yKey}),
        hours = hoursRange[1] - hoursRange[0];    
    
    var tRange = d3.extent(dataset, function (d) {return d.val}),
        tMin = tRange[0],
        tMax = tRange[1];

    var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
    
    // the scale
    var scale = {
        x: d3.scaleLinear()
           .range([-1, width]),
        y: d3.scaleLinear()
           .range([height, 0]),
    };
    
    var xBand = d3.scaleBand().domain(xLabels).range([0, width]),
        yBand = d3.scaleBand().domain(yLabels).range([height, 0]);
    
    var axis = {
        x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
        y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
    };


    function updateScales(data){
        scale.x.domain([0, d3.max(data, d => d.xKey)]),
        scale.y.domain([ 0, d3.max(data, d => d.yKey)])
    }

    var colorScale = d3.scaleQuantile()
        .domain([0, colors.length - 1, d3.max(dataset, function (d) {return d.val;})])
        .range(colors);

    var zoom = d3.zoom()
        .scaleExtent([1, dotHeight])
        .on("zoom", zoomed);

    var tooltip = d3.select("body").append("div")
        .attr("id", "tooltip")
        .style("opacity", 0);

    // SVG canvas
    svg.call(zoom);


    // Clip path
  clip.attr("width", width)
        .attr("height", height+dotHeight);



        

    //Create X axis
    var renderXAxis = xAxis 
        //.attr("transform", "translate(0," + scale.y(-0.5) + ")")
        //.call(axis.x)

    //Create Y axis
    var renderYAxis = yAxis.call(axis.y);


    function zoomed() {
        d3.event.transform.y = 0;
        d3.event.transform.x = Math.min(d3.event.transform.x, 5);
        d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
        // console.log(d3.event.transform)

        // update: rescale x axis
        renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));

        // Make sure that only the x axis is zoomed
        heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
    }
    
    svg.call(renderPlot, dataset)
    
    function renderPlot(selection, dataset){
        
        //Do the axes
        updateScales(dataset)
        selection.select('.y.axis').call(axis.y)
        selection.select('.x.axis')
                .attr("transform", "translate(0," + scale.y(-0.5) + ")")
                .call(axis.x)
           
        
        // Do the chart
        const update = heatDotsGroup.selectAll("ellipse")
        .data(dataset);
        
        update
        .enter()
        .append("ellipse")
        .merge(update)
        .attr("cx", function (d) {return scale.x(d.xKey) - xBand.bandwidth();})
        .attr("cy", function (d) {return scale.y(d.yKey) + yBand.bandwidth();})
        .attr("rx", dotWidth)
        .attr("ry", dotHeight)
        .attr("fill", function (d) {
            return colorScale(d.val);}
            )
         
        
        update.exit().remove();
        
    }


};

#clickMe{
    height:50px;
    width:150px;
    background-color:lavender;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    
    <title>Heatmap Chart</title>

    <!-- Reference style.css -->
    <!--    <link rel="stylesheet" type="text/css" href="style.css">-->

    <!-- Reference minified version of D3 -->
    <script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='heatmap_v4.js' type='text/javascript'></script>
</head>

<body>
<input id="clickMe" type="button" value="click me to push new data" onclick="run();" />

    <div id='chart'>
    <svg width="700" height="500">
      <g class="focus">
        <g class="xaxis"></g>
        <g class="yaxis"></g>
      </g>
    </svg>
   </div>
    
   
    <script>
        function run() {
            var dataset = [];
                for (let i = 1; i < 360; i++) { //360
                    for (j = 1; j < 7; j++) {  //75
                        dataset.push({
                            xKey: i,
                            xLabel: "xMark " + i,
                            yKey: j,
                            yLabel: "yMark " + j,
                            val: Math.random() * 25,
                        })
                        }
                    };

                    heatmap(dataset)
        }

        $(document).ready(function() {});
    </script>
</body>

</html>

这里的导出选择仍然是空的，因为数据数组的大小是固定的。 D3 假定新数据替换旧数据，但它不知道新数据应该表示为新元素，除非我们当然指定一个关键函数，如现在已删除的注释中所述。这可能是也可能不是您想要的功能。

关于javascript - d3.js:进入-更新-退出模式 - 旧点未删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51623912/

文章推荐： javascript - 在多个选项卡中使用 indexeddb 操作

文章推荐： javascript - 在 javascript/ajax 内的页面上调用 php var

文章推荐： javascript - Tempus Dominus - 使用 javascript 设置日期

文章推荐： javascript - 将参数从根 saga 传递到分派(dispatch)的操作

c++ - 为什么我可以 mov 进入 eax，进入 ax，但不能进入 al，甚至可能进入 ah？
如果我 mov, eax 12345 和之后的 mov var, eax (假设 var 是一个 32 位的 int 等..等等)并输出 var 稍后它会正确输出。与 ax 相同。 mov ax,
php - if 进入 for 时的奇怪行为
我有这个代码: for($nrt=0; $nrt"; if($sidesIndexes[$nrt]==$nrt) { echo "am I in??? ".$sidesInde
进入 channel 无限循环不阻塞
我正在阅读The Go Programming Language的8.5章，并陷入一些代码。下面的代码列表。 func main() { naturals := make(chan int)
MYSQL 进入 OUTFILE
我写了一个 MySQL 查询用于将数据导出到文本文件。查询运行成功，但结果与我的预期不符。我想在列之间没有间距的结果。 select sample_export_record1_2013.
excel - 进入 ThisWorkbook 代码区
在普通的 Excel 窗口中，我可以打开 VBE 并通过触摸键序列插入一个新模块:ALT+F11、ALTim 全部不使用鼠标。有没有办法打开 VBE 并导航到本工作手册不使用鼠标的代码区域？最佳
reactjs - Axios 进入 .then 未按预期工作
我正在使用 axios 发出 http 请求。在 .then() 内部，我正在使用另一个 axios 调用。最后，我有第三个 then()，它应该在第二个 then 之后运行，但实际上并没有这样做。
iphone - MPMoviePlayerController 进入 View
我需要在 cocos2d 项目中播放视频..我的问题是:如何将 MPMoviePlayerController 放入我的 View 中，如下所示:？ UIView *theView = [[CCDir
javascript - Angular 进入 Controller
我正在学习 Angular。以下代码有效: .controller('abc', function ($scope, $http) { $http.get("/Handlers/Authenticat
c# - ViewModel 进入 View
目前我正在使用 WPF 学习 C#。我的主要方法是尽我所能使用 MVVM 模式，但现在我有点困惑。在我所有 View 的应用程序中，我有一个 View 模型: private DruckviewVi
javascript - IF 进入 Google 脚本中关于提取电子邮件的循环
关于将 G 邮件提取到 Google 电子表格，我该如何添加 IF 以按主题驳回特定电子邮件？例如:电子邮件回复(主题中带有“RE:”)。我不希望这些电子邮件出现在我的电子表格中。我尝试过使用 LO
javascript - 进入 Spotify 阵列
我正在尝试使用 Spotify API 并进入数组。 const App = () => { const [isLoading, setIsLoading] = useState(true);
symfony - 如何使用条件 if 进入 assetic
我有一个 html 模板，并且有一个条件为 --> 的代码 --> window.jQuery || document.write(""+"");
java - 进入 UI 线程
我正在开发一个 Android 应用程序，该应用程序会暴力破解从 int 创建的 MD5 和。暴力破解部分工作正常。 (我可以sysout最终值并且它是正确的。) 我在将输出值发送到警报对话框时遇到
jquery - D3 进入/退出路径圆组
我正在创建一个界面，用户可以通过该界面生成多系列折线图，并控制绘制哪些数据集。要绘制哪些数据集由复选框控制。页面加载时，默认数据集以图表形式呈现，并且 $('input:checkbox.data-
javascript - 进入/退出未正确清理强制布局中弹出的节点/链接
我尝试将有向无环图绘制为力布局。但是我注意到，尽管为每个组元素灌输了进入/退出条件，弹出的节点/链接并没有从 DOM 中删除它们自己。相反，弹出的节点/链接在力布局中卡住；这意味着没有调用进入/退
c# - 调试问题 - 进入 - C#
这里是新手。我不知道它是怎么发生的，但我正在处理一个程序，当我去调试并进入时，黄色箭头走到了我代码的最后并跳过了整个 block 。有快速解决方法吗？最佳答案按 F11，或单击工具栏上的“Step
android - 进入 ListNavigation 单击操作栏中的
我的 Action 栏 sherlock 中有一个列表。我想在用户点击该列表时得到。我不想知道用户何时点击某个项目，我已经知道 (onNavigationItemSelected)。在我的 onCr
MySQL 日期 -> 进入 EuroDate
** 你好 **我如何从 ci 中的 mysql 日期获取 eurodate 来工作......无法弄清楚 - 请帮忙想要获取日期 YY-mm- dd -> dd-mm-yy提前致谢最佳答案 $t
bash - cd 进入 while 循环中的目录不起作用
我有以下脚本: #!/bin/bash ls -1 | while read d do [[ -f "$d" ]] && continue echo $d cd $d done
c# - 进入/退出方法时如何增加/减少缩进？
TL;DR - 跳转到最后一段背景我正在执行一些数据驱动测试，并将日志文件用作测试输出之一。它的工作原理是这样的- 读取文件夹中的第一个文件处理第一行并转换为测试运行测试执行验证 1 ...

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3.js:进入-更新-退出模式 - 旧点未删除