d3.js——給柱形圖添加事件出現的問題總結

阿新 • • 發佈：2017-08-02

htm 代碼 lac ring tle log 顏色 out edge

首先做出一個動態的柱形圖（這兒用的d3.js的版本是v3，用v4的話有些函數會發生變化）

效果圖：

技術分享

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>histogramTransitionEvent</title>
    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape 
-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .MyText {
            fill: white;
            text-anchor: middle;
        }
    </style>
</head>
<body>
<script src="d3.js"></script>
<script>
    // 
添加svg畫布
    var width=400;
    var height=400;
    //在 body 裏添加一個 SVG 畫布
    var svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height);
    //畫布周邊的空白
    var padding={
        left:30,
        right:30,
        top:20,
        bottom:20
    };
    //定義一個數組
    var 
 dataset=[10,20,30,40,33,24,12,5];
    //x軸的比例尺
    var xScale=d3.scale.ordinal()
    // 使用了d3.scale.ordinal() 它支持範圍分檔。與定量比例尺（如d3.scale.linear()）返回連續的範圍值不同，序數比例尺使用的是離散範圍值，也就是輸出值是事先就確定好的。
    // 映射範圍時，可以使用range()，也可以使用rangeBands()。後者接收一個最小值和一個最大值，然後根據輸入值域的長度自動將其切分成相等的塊或“檔”。0.2也就是檔間距為每一檔寬度的20%。
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0,width-padding.left-padding.right]);
    //y軸的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height-padding.top-padding.bottom,0]);

    //定義坐標軸
    //定義x軸
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
    //定義y軸
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //添加矩形和文字元素
    var rectPadding = 4;
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("width",xScale.rangeBand()-rectPadding)
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height",function(d){
            return height-padding.top-padding.bottom-yScale(d);
        })//console.log(width-padding.left-padding.right);
    //添加文字元素
    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("y",function(d){
            var min = yScale.domain()[0];
           // console.log(yScale(min));
            return yScale(min);
        })
        .transition()
        .delay(function(d,i){
            return i*200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand()-rectPadding)/2;
        })
        .attr("dy",function(){
            return 20;
        })
        .text(function(d){
            return d;
        });

    //添加坐標軸元素
    //添加x軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
        .call(xAxis);
    //添加y軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .call(yAxis);
</script>
</body>
</html>

現在像個這個動態的柱形圖添加mouseover和mouseout事件。

做法：

1.去掉style樣式中的.MyText類，直接在添加矩形的時候添加顏色屬性

2.在添加矩形的時候添加事件

...

//添加矩形和文字元素
    var rectPadding = 4;
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("width",xScale.rangeBand()-rectPadding)
        
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height",function(d){
            return height-padding.top-padding.bottom-yScale(d);
        })
        .attr("fill","steelblue")
        //添加事件
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        });

...

但是這樣會報錯，會顯示on不是一個函數

後來知道應該把on事件放在transition()之前，但是為啥這麽做可以現在還不知道

 ...

//添加矩形和文字元素
    var rectPadding = 4;
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate("+padding.left+","+padding.top+")")
        .attr("x",function(d,i){
            return xScale(i)+rectPadding/2;
        })
        .attr("width",xScale.rangeBand()-rectPadding)
        //添加事件在 transition()之前
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        })
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height",function(d){
            return height-padding.top-padding.bottom-yScale(d);
        })
        .attr("fill","steelblue");

...

最終效果圖：

技術分享

這裏面矩形圖的教程來源：http://d3.decembercafe.org/pages/lessons/9.html

d3.js——給柱形圖添加事件出現的問題總結

htm 代碼 lac ring tle log 顏色 out edge 首先做出一個動態的柱形圖（這兒用的d3.js的版本是v3，用v4的話有些函數會發生變化）效果圖：代碼： <!DOCTYPE html> <html lang="en">

D3.js繪製柱形圖

注意：此次繪製的柱形圖不涉及座標。步驟：一.新增矩形。 <script type="text/javascript"> var datest = [30,78,90,210,105,98,150,177]; //繪製柱形圖所用的資料 var wid

vue.js使用vue-echarts給柱形圖繫結點選事件

echarts給柱形圖的每個柱子設定不同顏色

series: [{ type: 'bar', data: [5, 20, 36, 10, 10, 20], itemStyle: {

Echarts 圖表外掛學習（3）-- 給柱形圖的每個柱子設定不同顏色

1.實現的效果 2.引用Echarts 本地：<script src="../lib-v3/echarts/echarts.min.js"></script> 線上：<script src="http://echarts.baidu.c

D3生成柱形圖新增滑鼠事件(一）

直接上程式碼，這是動態生成的柱形圖，並添加了滑鼠事件 <html> <head> <meta charset="utf-8"> <title>8.1.1 滑鼠互動</t

D3.js 柱形圖資料更新

let dataset = [50, 43, 120, 87, 99, 167, 300]; // svg繪製區域的寬度 let width = 400; // svg繪製區域的高度 let height = 400;

D3.js 柱形圖

let dataset = [50, 43, 120, 87, 99, 167, 300]; // svg繪製區域的寬度 let width = 400; // svg繪製區域的高度 let height = 400;

d3 畫簡單的柱形圖

pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3

java 給圖片和動圖添加水印

port buffere imp 結束 exce cat screen rem *** 這兩天根據需求在做圖片上傳添加水印，實話說重來不知道java還可以這樣操作，既然有個這要求我就去找資料研究了一番，現在把它分享一下，希望能幫到有需要的兄弟。給普通圖片添加水印和給動圖添

js中給json對象添加屬性和json數組添加元素

.class ray values java asc clas 添加元素 mes ber js中給json對象添加新的屬性比如現在有一個json對象為jsonObj，需要給這個對象添加新的屬性newParam，同時給newParam賦值為pre。做法如下： var

[Xcode10 實際操作]二、視圖與手勢-(6)給圖像視圖添加陰影效果

效果控制器 loading 一個 size super clas view aci 本文將演示給圖像視圖添加陰影效果 1 import UIKit 2 3 class ViewController: UIViewController { 4 5

[Swift通天遁地]六、智能布局-(5)給視圖添加Align(對齊)和Fill(填充的約束以及Label的約束

頂部對齊適應 light ecs get create number 調整 htm 本文將演示如何給視圖添加Align(對齊)和Fill(填充的約束以及Label的約束。錨點默認位於視圖中心點的位置。首先確保在項目中已經安裝了所需的第三方庫。點擊【Podfil

網頁，html5,canvas，js 動態繪製柱形圖

<!DOCTYPE html> <head><title>chart demo</title> <style> #chartContainer{

js在父元素上添加點擊事件，怎麽阻止子元素繼承父元素的點擊事件？

!= fun 元素 spa clas urn else target click div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }js在父元素

給對象添加事件

set pre text function ack 事件 pan val har <!doctype html> <html lang="en"> <head> <title>javascript1</title>

js原生添加事件的方式

btn 方式 als 函數 dev else if tar onclick 添加 js原生添加事件的方式： 1. 直接在html標簽上添加 <div onclick="alert(‘div‘)">div</div> 2. 用dom的on...方法添加

柱形圖，餅狀圖JavaScript

column 註意文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

在Echarts 柱形圖的單擊事件中寫入自定義的參數

cnblogs img ges == innerhtml .com echart 通過 code

POJ 3177--Redundant Paths【無向圖添加最少的邊成為邊雙連通圖 && tarjan求ebc && 縮點構造縮點樹】

when tab sub exp 無向圖 redundant -m term 一個點 Redundant Paths Time Limit: 1000MS Memory Limit: 65536K Total Submis

d3.js——給柱形圖添加事件出現的問題總結

相關推薦