黄色超碰网站,人妻精品无码一区二区,97久久久精品

一、交互操作

對某一元素添加交互操作十分簡單：

var circle = svg.append('circle');
circle.on('click',function(){
    //在這里添加交互的操作
})

在D3 中，每一個選擇集都有 on() 函數(shù)，用于添加事件監(jiān)聽器。

鼠標(biāo)常用的事件有：

click：鼠標(biāo)單擊某元素時，相當(dāng)于 mousedown 和 mouseup 組合在一起。

mouseover：光標(biāo)放在某元素上。

mouseout：光標(biāo)從某元素上移出來時。

mousemove：鼠標(biāo)被移動的時候。

mousedown：鼠標(biāo)按鈕被按下。

mouseup：鼠標(biāo)按鈕被松開。

dblclick：鼠標(biāo)雙擊。

在柱狀圖添加鼠標(biāo)移入移出事件

注意：柱狀圖之前添加的樣式，不要寫在CSS中

.on('mouseover', function (d, i) {
    d3.select(this)
        .style('fill', 'steelblue')
})
.on('mouseout',function(d,i){
    d3.select(this)
    .transition()
    .duration(500)
    .style('fill','yellowgreen')
})

根據(jù)經(jīng)驗，細(xì)微的界面反饋（比如鼠標(biāo)懸停在元素上觸發(fā)過渡），過渡時間大約 150 毫秒比較合適，而更顯著的視覺過渡（比如整個數(shù)據(jù)視圖的變化）持續(xù) 1000 毫秒比較理想。1000 毫秒（1 秒）不算長，也不算短。

效果圖.gif

指針事件和重疊元素

鼠標(biāo)事件只有在某個元素有像素被鼠標(biāo)“接觸到”的時候才會觸發(fā)。如果兩個元素疊加在一起，鼠標(biāo)經(jīng)過的元素只是“上面的”那個（即離你眼睛更近的那個）。這時候，只有上面的元素才會觸發(fā)mouseover事件，下面的元素不會。

可以使用常規(guī)的CSS選擇符來選擇相應(yīng)的元素:

svg text {
    pointer-event:none;
}

分組SVG元素

在一組視覺元素需要統(tǒng)一行為的情況下，這種機(jī)制相當(dāng)有用。比如條形圖吧，可以把 rect 和 text 元素分別放在各自的組里，原來元素的層次如下所示：

svg
   rect
   rect
   rect
   ...
   text
   text
   text
   ...

分組之后，就變成了這樣：

svg
   g
     rect
     text
   g
     rect
     text
   ...

不用再擔(dān)心什么指針事件，也不用管什么元素在上面，只要給整個組綁定事件監(jiān)聽器即可。這樣，無論單擊 rect 還是單擊 text，都會觸發(fā)相同的代碼，因為它們在一個組里。

交互式圖表真正的強(qiáng)大之處，體現(xiàn)在能夠展示數(shù)據(jù)的不同視圖，吸引用戶從不同角度來探索數(shù)據(jù)中蘊(yùn)藏的奧秘。

對數(shù)據(jù)進(jìn)行排序是非常重要的一種功能。而且正如你所料，D3 讓排序元素變得異常簡單。

仍以條形圖為例，我們接下來給每個條形添加一個 click 事件監(jiān)聽器，在這個匿名函數(shù)中調(diào)用我們新定義的一個函數(shù) sortBars()：

.on("click",function(){
    sortBars();
})

單擊調(diào) 用 sortBars() 時，首先會選擇所有 rect 元素。然后使用 D3 提供的sort() 方法對它們進(jìn)行排序，排序依據(jù)是綁定到它們的數(shù)據(jù)值。sort() 需要知道哪個元素排在前面，哪個元素排在后面，所以我們就傳給了它一個比較函數(shù)。

//Define sort function
var sortBars = function() {

    svg.selectAll("rect")
        .sort(function(a, b) {
            return d3.ascending(a, b);
        })
        .transition()
        .duration(1000)
        .attr("x", function(d, i) {
            return xScale(i);
        });

};

之前介紹過新過渡效果會打斷和覆蓋舊過渡效果。單擊條形會觸發(fā)一次過渡，而隨后的鼠標(biāo)懸停又會觸發(fā)另一次過渡。為了運行鼠標(biāo)懸停的高亮過渡，原來正在運行的過渡就會中斷。結(jié)果就是那些被鼠標(biāo)懸停過的條形永遠(yuǎn)不會到達(dá)它們的目標(biāo)位置。

所以說，懸停效果最好還是交給 CSS 打理，而那些視覺變化更密集的操作可以交給 D3 和 JavaScript

rect:hover {
    fill: orange;
}

//Width and height
var w = 600;
var h = 250;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

var xScale = d3.scaleBand()
                .domain(d3.range(dataset.length))
                .rangeRound([0, w])
                .paddingInner(0.05);

var yScale = d3.scaleLinear()
                .domain([0, d3.max(dataset)])
                .range([0, h]);

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

//Create bars
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return xScale(i);
    })
    .attr("y", function(d) {
        return h - yScale(d);
    })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) {
        return yScale(d);
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + Math.round(d * 10) + ")";
    })
    .on("click", function() {
        sortBars();
    });

//Create labels
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return xScale(i) + xScale.bandwidth() / 2;
    })
    .attr("y", function(d) {
        return h - yScale(d) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

//Define sort order flag
var sortOrder = false;

//Define sort function
var sortBars = function() {

    //Flip value of sortOrder
    sortOrder = !sortOrder;

    svg.selectAll("rect")
        .sort(function(a, b) {
            if (sortOrder) {
                return d3.ascending(a, b);
            } else {
                return d3.descending(a, b);
            }
        })
        .transition()
        .delay(function(d, i) {
            return i * 50;
        })
        .duration(1000)
        .attr("x", function(d, i) {
            return xScale(i);
        });

};

DIV提示條

當(dāng)提示條要超出SVG圖形的邊界時，則只能通過創(chuàng)建DIV來實現(xiàn)

tooltip.png

<div id="tooltip" class="hidden">
    <p><strong>Important Label Heading</strong></p>
    <p><span id="value">100</span>%</p>
</div>

//Width and height
var w = 600;
var h = 250;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

var xScale = d3.scaleBand()
                .domain(d3.range(dataset.length))
                .rangeRound([0, w])
                .paddingInner(0.05);

var yScale = d3.scaleLinear()
                .domain([0, d3.max(dataset)])
                .range([0, h]);

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

//Create bars
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return xScale(i);
    })
    .attr("y", function(d) {
        return h - yScale(d);
    })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) {
        return yScale(d);
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + Math.round(d * 10) + ")";
    })
    .on("mouseover", function(d) {

        // 取得條形的 x/y 值，增大后作為提示條的坐標(biāo)
        var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
        var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

        // 更新提示條的位置和值
        d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")                     
            .select("#value")
            .text(d);
    
        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);

    })
    .on("mouseout", function() {
    
        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);
        
    })
    .on("click", function() {
        sortBars();
    });

//Define sort order flag
var sortOrder = false;

//Define sort function
var sortBars = function() {

    //Flip value of sortOrder
    sortOrder = !sortOrder;

    svg.selectAll("rect")
        .sort(function(a, b) {
            if (sortOrder) {
                return d3.ascending(a, b);
            } else {
                return d3.descending(a, b);
            }
        })
        .transition()
        .delay(function(d, i) {
            return i * 50;
        })
        .duration(1000)
        .attr("x", function(d, i) {
            return xScale(i);
        });

};

鼠標(biāo)點擊時，更新圖表

結(jié)合D3動畫

生成新的隨機(jī)數(shù)

將新值綁定到已有元素

把元素過渡到與新值對應(yīng)的新位置、高度、顏色

更新柱狀圖.gif

<p>點擊更新柱狀圖</p>

let [w, h] = [600, 250];
let paddingTop = 20
var dataset = [5, 1, 13, 19, 21, 25, 22, 18, 15, 13,
    11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

let xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .rangeRound([0, w])
    .paddingInner(0.05)
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([0, h - paddingTop])


var svg = d3.select("body")
    .append("svg")
    .attr('width', w)
    .attr('height', h)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
        return xScale(i)
    })
    .attr("y", function (d) {
        return h - yScale(d)
    })
    .attr('width', xScale.bandwidth())
    .attr('height', function (d) {
        return yScale(d)
    })
    .attr("fill", function (d) {
        return `rgb(0,0,${Math.round(d * 10)})`
    })

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function (d) {
        return d
    })
    .attr("text-anchor", "middle")
    .attr("x", function (d, i) {
        return xScale(i) + xScale.bandwidth() / 2
    })
    .attr("y", function (d) {
        return h - 2 - yScale(d)
    })
    .attr("font-size", "12px")
    .attr("fill", "#000")

d3.select("p")
    .on("click", function () {
        let numValues = dataset.length;
        var maxValue = 100;
        dataset = [];
        for (let i = 0; i < numValues; i++) {
            dataset.push(Math.floor(Math.random() * maxValue))
        }
        console.log(`dataset`, dataset)
        yScale.domain([0, d3.max(dataset)])

        svg.selectAll("rect")
            .data(dataset)
            .transition()
            .delay(function (d, i) {
                return i / dataset.length * 1000
            })
            .attr("y", function (d) {
                return h - yScale(d)
            })
            .attr("height", function (d) {
                return yScale(d)
            })
            .attr("fill", function (d) {
                return `rgb(0,0,${Math.round(d * (255 / maxValue))})`
            })

        svg.selectAll("text")
            .data(dataset)
            .transition()
            .delay(function (d, i) {
                return i / dataset.length * 1000
            })
            .text(function (d) {
                return d
            })
            .attr("x", function (d, i) {
                return xScale(i) + xScale.bandwidth() / 2
            })
            .attr('y', function (d) {
                return h - 2 - yScale(d)
            })
    })

二、布局

D3 與其它很多可視化工具不同，相對來說較底層，對初學(xué)者來說不太方便，但是一旦掌握了，就比其他工具更加得心應(yīng)手。

對比

大部分的數(shù)據(jù)可視化工具：數(shù)據(jù) => 繪圖函數(shù) => 圖表

D3.js: 數(shù)據(jù) => 布局 => 獲得繪圖所需數(shù)據(jù) => 在畫布上添加相應(yīng)的圖形 => 圖表

可以看到，D3 的步驟相對來說較多。壞處是對初學(xué)者不方便、也不好理解。好處是能夠制作出更加精密的圖形。因此，我們可以據(jù)此定義什么時候選擇 D3 比較好：

選擇 D3：如果希望開發(fā)腦海中任意想象到的圖表。
選擇 Highcharts、Echarts等：如果希望開發(fā)幾種固定種類的、十分大眾化的圖表。

看起來，D3 似乎是為藝術(shù)家或發(fā)燒友準(zhǔn)備的。有那么點意思，但請初學(xué)者也不要放棄。

布局分類

D3 總共提供了 12 個布局：餅狀圖（Pie）、力導(dǎo)向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集群圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區(qū)圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。

12 個布局中，層級圖（Hierarchy）不能直接使用。集群圖、打包圖、分區(qū)圖、樹狀圖、矩陣樹圖是由層級圖擴(kuò)展來的。如此一來，能夠使用的布局是 11 個（有 5 個是由層級圖擴(kuò)展而來）。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

07-D3.js交互和布局

07-D3.js交互和布局

一、交互操作

二、布局

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

07-D3.js交互和布局

一、交互操作

二、布局

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、交互操作