D3学习指北--第四章应用，冒泡排序可视乎的功能增加

Posted 2021-04-23 流星蝴蝶没有剑

前言

  本节内容将结合上一章冒泡排序可视化的内容，给他添加以下几种样式：

• 1、横坐标轴与纵标轴。

• 2、柱形图柱形的宽度，借助比例尺，全部添加到坐标轴里。

• 3、为了更直观，将冒泡排序交换的柱形，变成红色。

特别说明：坐标轴的原始区间为坐标轴的刻度，坐标轴的映射区间为坐标轴的长度。

第一步：分析需求

一个x轴，一个y坐标轴。x坐标轴下表为第几个，y坐标轴下表为[0,最大值]。

一个解决柱形图的交换柱形颜色的变换，我采用的方式为交换的索引数放到一个数组，利用过滤器过滤出来然后修改CSS样式

这个章节的应用内容比较少，但是坐标轴的逻辑比较复杂，所以理解逻辑就可以了。

大家可以去学习一下CSS样式的"transform"，因为坐标轴没有定位，所以我们利用CSS样式的来移动它。

另外，本章实验是利用上一章应用的源代码增加内容。

第二步：坐标轴的添加

因为每个元素的数字需要按照Y坐标轴的比例尺求对应的比例尺的值；另外坐标轴的值是倒的，所以画坐标轴要反转比例尺的映射区间。这两个操作导致我们 需要先画柱形图，再反转画比例尺。步骤图如下：

1、声明比例尺
2、根据y比例尺求出柱形图的高
3、根据x比例尺求出柱形对应的宽度
3、反转y比例尺的映射区间
4、画比例尺

坐标轴：

    //声明比例尺
    var Xscale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0,450],0,0);
    var Yscale = d3.scale.linear()
        .domain([0,10])
        .range([0,200]);
    //根据y比例尺求出柱形的高
    //操作
    //反转y比例尺的映射区间
    Yscale.range([200,0])
    //画比例尺
    var Xaxis = d3.svg.axis().scale(Xscale).orient("bottom");
    d3.select("svg").append("g")
        .attr("class","axis")
        .style("transform","translate("+showconf["left"]+"px,"+(300-showconf["bom"]+"px")+")")
        .call(Xaxis)
    var Yaxis = d3.svg.axis().scale(Yscale).orient("left");
    d3.select("svg").append("g")
        .attr("class","axis")
        .style("transform","translate("+showconf["left"]+"px,"+(showconf["top"]+"px")+")")
        .style("transform","translate("+showconf["left"]+"px,"+(showconf["top"]+"px")+")")
        .call(Yaxis)

这是我们的添加坐标轴的大概框架。另外因为这个代码混乱，本来是不想发这期的代码的，但是跟同学聊过之后，决定先发这个代码，等后天的话， 利用这个代码从新发一期函数式编程。

第三步：交换的的柱形变红

这个实现最简单，理论就是：记录更换的数据索引，画柱形的时候利用过滤器把这索引柱形颜色变红。这个颜色显示只需要添加到数据更新上就可以--这个自己想一下就可以了。

下面直接上代码：

    .filter(function(d,i){
        for(var each in exdataset){

            if(exdataset[each] == i){
                console.log(exdataset);
                return true;
            }
        }

 }).attr("fill","red");

效果如下：

Play

尾言

这个写的很不舒服，虽然这个代码实现了，但是整体实现的代码过于混乱，鉴于此，我会在后面一篇修改这个这个代码，出一篇函数式编程的教学。