D3js(v3)使用

已于 2022-05-13 16:29:33 修改
阅读量1.1k 收藏 6
点赞数 1
分类专栏： # S6. 数据可视化 文章标签： javascript 前端 html
于 2022-05-13 14:49:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/124751738
版权

D3使用

文章目录

一 使用

可视化库。

https://www.d3js.org.cn/

https://github.com/xswei/d3js_doc

d3.v3.min.js

https://download.csdn.net/download/qq_35812380/85360370?spm=1001.2014.3001.5501

API:

https://github.com/xswei/d3js_doc/blob/master/API_Reference/API.md#arrays-d3-array

代码文件:

https://download.csdn.net/download/qq_35812380/85362383

二 操作

2.1 操作元素, 操作svg

.select()

.selectAll()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3js</title>
    <script src="./d3.min.js"></script>
</head>
<body>
<div id="box">
    <p>p元素</p>
    <p>p元素</p>
    <p>p元素</p>
</div>
<div>第二个div元素</div>
<svg width="600" height="400">
    <rect x="100" y="100" width="200" height="100" style=" stroke:red; stroke-width: 4"></rect>
</svg>
<script>
// 1. d3获取元素
console.log(d3.select('#box'))
console.log(d3.select('#box p'))
console.log(d3.selectAll('#box'))
console.log(d3.selectAll('div'))

// 2. 获取元素属性
console.log(d3.select('svg').attr('width'))


// 03 设置属性
// d3.select('rect')
//   .attr('fill', 'seagreen')
//   .attr('transform', 'translate(100, 100)')


// 04 添加删除元素
d3.select('svg').append('rect')
    .attr('x', 100)
    .attr('y', '200')
    .attr('width', '200')
    .attr('height', '100')
    .attr('fill', 'lightblue')

d3.select('svg').append('text')
    .attr('x', 100)
    .attr('y', 260)
    .attr('fill', 'red')
    .attr('font-size', 20)
    .attr('textLength', 200)
    .text('XXXX')

// 05 删除元素
d3.selectAll('rect').remove()
    
</script>
</body>
</html>

2.2 数据绑定bind data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定数据</title>
    <script src="./d3.min.js"></script>
</head>
<body>

<script>
    // 文章参考
    // https://bost.ocks.org/mike/join/?_blank


    // 01 添加svg, 通过属性创建svg
    d3.select('body').append('svg')
        .attr('width', 600)
        .attr('height',400)

    // 02 绘制圆形1
    // d3.select('svg').append('circle')
    //     .attr('cx', 100)
    //     .attr('cy',100)
    //     .attr('r',10)
    //     .attr('fill','orange')
    //
    //
    // d3.select('svg').append('circle')
    //     .attr('cx', 100)
    //     .attr('cy',100)
    //     .attr('r',10)
    //     .attr('fill','orange')


    // 03 定义数据,批量创建, 数据驱动
    const data = [
        { cx: 100, cy: 100, r: 10, fill: 'orange' },
        { cx: 130, cy: 140, r: 20, fill: 'seagreen' },
        { cx: 230, cy: 240, r: 19, fill: 'lightblue' },
    ]

    d3.select('svg').selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) { return d.cx; })
        .attr("cy", function(d) { return d.cy; })
        .attr("r", function(d) { return d.r; })
        .attr("fill", function(d) { return d.fill; });
</script>
</body>
</html>

2.3 插入&删除元素

  1. append():在选择集末尾插入元素
  2. update():更新元素
  3. exit():删除元素
  4. enter()方法，: 新增数据, 使得在有数据，而没有足够图形元素的情况下，补充足够的元素
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三种选择集</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <p></p>
  <p></p>
  <p></p>
  <script>
    //数据
    const data = [1, 2, 3, 4, 5]
    const allAp = d3.selectAll('body p')
    const update = allAp.data(data)
    update.text(d => "更新" + d)
    const enter = update.enter()
    enter.append('p').text(d => '新增' + d)

    const allAp = d3.selectAll('body p')
    const update = allAp.data(data)
    update.text(d => "更新" + d)

    const exit = update.exit()
    exit.text(d => "将要删除" + d)

   // 03 enter 
    d3.select('body').selectAll('p')
      .data(data)
      .enter()
      .append('p')
      .text(d => d)

    // 04 data datum 
    // const data = [1, 2, 3, 4, 5]
    // const data = 'XXXX'
    // const data = { name: 'lg', age: 100 }
    //
    // d3.selectAll('body p')
    //   // .data(data)
    //   .datum(data)
    //   .text(d => d.name)
  </script>
</body>

</html>

2.4 绘制静态直方图

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制直方图</title>
  <script src="./d3.min.js"></script>
  <style>
    div svg {
      display: block;
      margin: 40px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <div id="svg"></div>
  <script>
    // 定义数据
    const width = 700
    const height = 400
    const rectStep = 40
    const rectWidth = 30
    const data = [10, 50, 280, 122, 90, 230, 250, 300]

    // 定义填充
    const margin = { left: 20, right: 20, top: 20, bottom: 20 }

    // 创建 svg 
    d3.select('#svg').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 绘制矩形
    d3.select('svg').selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => margin.left + i * rectStep)
      .attr('y', d => height - d - margin.bottom)
      .attr('width', rectWidth)
      .attr('height', d => d)
      .attr('fill', 'lightblue')

    // 绘制文字
    d3.select('svg').selectAll('text')
      .data(data)
      .enter()
      .append('text')
      .attr('fill', '#666')
      .attr('font-size', '20')
      .attr('x', (d, i) => margin.left + i * rectStep)
      .attr('y', d => height - d - margin.bottom - 5)
      .attr('text-anchor', 'middle')
      .attr('transform', `translate(${rectWidth / 2})`)
      .text(d => d)
  </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3K7FHVH8-1652424418572)(%E5%8F%AF%E8%A7%86%E5%8C%96.assets/image-20220513125544496.png)]

2.5 比例尺

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3常见比例尺</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <script>
    // 比例尺： 线性  +  序数
    // 01 scaleLinear
    let scale = d3.scaleLinear()
    //   .domain([1, 5])
    //   .range([1, 100])
    // console.log(scale(1))
    // console.log(scale(4))
    // console.log(scale(5))
    // scale.clamp(true)
    // console.log(scale(-1))
    // console.log(scale(10))

    // 02 scaleBand
    scale = d3.scaleBand()
      .domain([1, 2, 3, 4])
      .range([0, 100])
    // console.log(scale(1))
    // console.log(scale(2))
    // console.log(scale(3))
    // console.log(scale(4))
    // console.log(scale(0))
    // console.log(scale(10))

    // 03 scaleOrdinal
    scale = d3.scaleOrdinal()
      .domain(['lg', 'syy', 'zce'])
      .range([18, 22, 40, 50])
    // console.log(scale('lg'))
    // console.log(scale('syy'))
    // console.log(scale('zce'))
    // console.log(scale('abc'))
    // console.log(scale('abcde'))

    // 04 scaleQuantize
    scale = d3.scaleQuantize().domain([0, 10]).range(['xl', 'm', 's'])
    console.log(scale(3.4))
    console.log(scale(4))
    console.log(scale(6.7))
    console.log(scale(-10))
    console.log(scale(30))

  </script>
</body>

</html>

2.6 绘制坐标轴

https://www.d3js.org.cn/document/d3-axis/#installing

  1. d3.axisTop():创建顶部坐标轴
  2. d3.axisRight():创建垂直右坐标轴
  3. d3.axisBottom():创建底部坐标轴
  4. d3.axisLeft():创建垂直居左坐标轴
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>比例尺与坐标轴</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <div id="box"></div>
  <script>
    // 定义数据
    const width = 600
    const height = 500
    const margin = { left: 50, right: 50, bottom: 50, top: 50 }
    const kindData = ['ES6+', "NodeJS", "Vue", "React", "Angular"]
    const kindPixel = [margin.left, width - margin.right]
    const ratioData = [80, 60, 50, 20, 100]
    const ratioPixel = [height - margin.bottom, margin.top]

    // 设置画布
    d3.select('#box').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 定义比例尺
    const xScale = d3.scaleBand().domain(kindData).rangeRound(kindPixel)
    // 定义坐标刻度生成器
    const xAxis = d3.axisBottom(xScale)
    // 绘制X轴具体的刻度内容
    d3.select('svg').append('g')
      .call(xAxis)
      .attr('transform', `translate(0, ${height - margin.bottom})`)
      .attr('font-size', 14)

    // 定义y轴比例尺
    const yScale = d3.scaleLinear().domain([0, d3.max(ratioData)]).range(ratioPixel)
    const yAxis = d3.axisLeft(yScale)
    d3.select('svg').append('g')
      .call(yAxis)
      .attr('transform', `translate(50, 0)`)
      .attr('font-size', 14)

  </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i82xCIcA-1652424418575)(%E5%8F%AF%E8%A7%86%E5%8C%96.assets/image-20220513125521527.png)]

2.7 过渡

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3过渡</title>
  <script src="./d3.min.js"></script>
</head>

<body>
  <script>
    // 添加画布
    const svg = d3.select('body').append('svg')
      .attr('width', 600)
      .attr('height', 400)

    // 绘制图形
    const circle = d3.select('svg').append('circle')
      .attr('cx', 100)
      .attr('cy', 100)
      .attr('r', 20)
      .attr('fill', 'seagreen')

    // transition duration delay ease 
    // 初始状态  结束状态 
    circle.attr('cx', 100).attr('cy', 100)

    // 结束状态
    circle.transition()
      .duration(3000)
      .delay(1000)
      .ease(d3.easeBounce)
      .attr('cx', 500)
      .attr('cy', 300)
  </script>
</body>

</html>

2.8 过渡直方图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图带过渡</title>
    <script src="./d3.min.js"></script>
</head>

<body>
<script>
    // 画布大小
    const width = 600
    const height = 400

    // 1 添加画布
    const svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height)

    // 2 填充
    const margin = { left: 30, right: 30, top: 20, bottom: 30 }

    // 3 准备源数据
    const data = [10, 20, 30, 40, 36, 25, 18, 5]

    // 4 绘制坐标轴（比例尺）[0, 1 , 2, 3]=>[0, 540]
    const xScale = d3.scaleBand()
        .domain(d3.range(data.length))
        .range([margin.left, width - margin.left - margin.right])
        .padding(0.1)

    // 5 定义X轴的生成器
    const xAxis = d3.axisBottom(xScale)
    // 6 绘制X轴坐标
    const gx = d3.select('svg').append('g')
        .call(xAxis)
        .attr('transform', `translate(0, ${height - margin.bottom})`)

    // 7 绘制Y轴（比例尺  生成器 Y绘制）[5, 40] [30, 400]
    const yScale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height - margin.top - margin.bottom, margin.bottom])
    const yAxis = d3.axisLeft(yScale)
    const gy = d3.select('svg').append('g')
        .call(yAxis)
        .attr('transform', `translate(${margin.left}, ${margin.top})`)

    // 8 绘制柱状图
    const rects = svg.selectAll('.myRect')
        .data(data)
        .enter()
        .append('rect')
        .attr('class', 'myRect')
        .attr('x', (d, i) => xScale(i))
        .attr('y', d => yScale(d))
        .attr('width', xScale.bandwidth())
        .attr('height', d => yScale(0) - yScale(d))
        .attr('fill', 'orange')
        .attr('transform', `translate(0, ${margin.top})`)

    // 提供二个状态
    rects.attr('y', () => yScale(0)).attr('height', 0)
    rects.transition()
        .duration(1000)
        .delay((d, i) => i * 200)
        .ease(d3.easeBounce)
        .attr('y', d => yScale(d))
        .attr('height', d => yScale(0) - yScale(d))

    // 9 绘制文件
    const texts = svg.selectAll('myText')
        .data(data)
        .enter()
        .append('text')
        .attr('class', 'myText')
        .attr('fill', '#666')
        .attr('text-anchor', 'middle')
        .attr('x', (d, i) => xScale(i))
        .text(d => d)
        .attr('transform', `translate(${xScale.bandwidth() / 2}, ${margin.top})`)
        .attr('y', () => yScale(0))
        .transition()
        .delay((d, i) => i * 200)
        .duration(1000)
        .ease(d3.easeBounce)
        .attr('y', (d) => yScale(d) - 5)
</script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HnlWXd5N-1652424418576)(%E5%8F%AF%E8%A7%86%E5%8C%96.assets/image-20220513144056800.png)]

2.9 添加交互

如何添加交互?
var circle = svg.append("circle");
circle.on("click",function(){
	//在此处添加交互内容
});

在D3中，每一个选择集都有on()函数，用于添加事件监听器。

其中，on()的第一个参数是监听的事件，第二个参数是监听到时间后响应的内容，第二个参数是一个函数。

对于鼠标，常用事件有：

click：鼠标单击某元素时，相当于mousedown和mouseup组合在一起

mouseover：光标放在某元素上

mouseout：光标从某元素上移出来时

mousemove：鼠标被移动的时候

mousedown：鼠标按钮被按下

mouseup：鼠标按钮被松开

dblclick：鼠标双击

键盘常用的事件

keydown：当用户按下任意键时触发，按住不放会重复触发此事件。

keypress：当用户按下字符键(大小写字母、数字、加号、等号、回车等)时触发，按住不放会重复触发此事件

keyup：当用户释放键时触发

触屏常用的事件

touchstart：当触摸点被放在触摸屏上时

touchmove：当触摸点在触摸屏上移动时

touchend：当触摸点从触摸屏上拿开时

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>柱状图带交互</title>
  <style>
    html,
    body {
      width: 100%;
      margin: 0;
    }

    #tip {
      color: #fff;
      display: none;
      margin-top: 15px;
      margin-left: 15px;
      position: absolute;
      padding: 5px 10px;
      border-radius: 3px;
      background: rgba(0, 0, 0, .4);
      font: normal 14px/1em '微软雅黑';
    }
  </style>
  <script src="./d3.min.js"></script>
</head>

<body>
  <script>
    // 画布大小
    const width = 600
    const height = 400

    // 1 添加画布
    const svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height)

    // 2 填充
    const margin = { left: 30, right: 30, top: 20, bottom: 30 }

    // 3 准备源数据
    const data = [10, 20, 30, 40, 36, 25, 18, 5]

    // 4 绘制坐标轴（比例尺）[0, 1 , 2, 3]=>[0, 540]
    const xScale = d3.scaleBand()
      .domain(d3.range(data.length))
      .range([margin.left, width - margin.left - margin.right])
      .padding(0.1)

    // 5 定义X轴的生成器
    const xAxis = d3.axisBottom(xScale)
    // 6 绘制X轴坐标
    const gx = d3.select('svg').append('g')
      .call(xAxis)
      .attr('transform', `translate(0, ${height - margin.bottom})`)

    // 7 绘制Y轴（比例尺  生成器 Y绘制）[5, 40] [30, 400]
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([height - margin.top - margin.bottom, margin.bottom])
    const yAxis = d3.axisLeft(yScale)
    const gy = d3.select('svg').append('g')
      .call(yAxis)
      .attr('transform', `translate(${margin.left}, ${margin.top})`)

    // 8 绘制柱状图
    const rects = svg.selectAll('.myRect')
      .data(data)
      .enter()
      .append('rect')
      .attr('class', 'myRect')
      .attr('x', (d, i) => xScale(i))
      .attr('y', d => yScale(d))
      .attr('width', xScale.bandwidth())
      .attr('height', d => yScale(0) - yScale(d))
      .attr('fill', 'orange')
      .attr('transform', `translate(0, ${margin.top})`)

    // 提供二个状态
    rects.attr('y', () => yScale(0)).attr('height', 0)
    rects.transition()
      .duration(1000)
      .delay((d, i) => i * 200)
      .ease(d3.easeBounce)
      .attr('y', d => yScale(d))
      .attr('height', d => yScale(0) - yScale(d))

    // 9 绘制文件
    const texts = svg.selectAll('myText')
      .data(data)
      .enter()
      .append('text')
      .attr('class', 'myText')
      .attr('fill', '#666')
      .attr('text-anchor', 'middle')
      .attr('x', (d, i) => xScale(i))
      .text(d => d)
      .attr('transform', `translate(${xScale.bandwidth() / 2}, ${margin.top})`)
      .attr('y', () => yScale(0))
      .transition()
      .delay((d, i) => i * 200)
      .duration(1000)
      .ease(d3.easeBounce)
      .attr('y', (d) => yScale(d) - 5)

    // 自定义缓动类
    class EaseObj {
      constructor(target) {
        this.target = target
        this.pos = { x: width / 2, y: height / 2 }
        this.endPos = { x: 0, y: 0 }
        this._play = false
        this.fm = 0
        this.speed = 0.1
      }
      set animate(value) {
        if (value !== this._play) {
          if (value) {
            this.render()
          } else {
            this.cancel()
          }
          this._play = value
        }
      }

      render() {
        const { pos, endPos, speed, target } = this
        pos.x += (endPos.x - pos.x) * speed
        pos.y += (endPos.y - pos.y) * speed
        target.style('left', `${pos.x}px`)
          .style('top', `${pos.y}px`)

        this.fm = requestAnimationFrame(() => {
          this.render()
        })
      }

      cancel() {
        cancelAnimationFrame(this.fm)
      }
    }

    // 10 定义提示框元素
    const tip = d3.select('body').append('div').attr('id', 'tip')
    // 11 鼠标移上
    rects.on('mouseover', ({ clientX, clientY }, data) => {
      tip.style('left', `${clientX}px`)
        .style('top', `${clientY}px`)
        .style('display', 'block')
        .html(`
          <p>此项平均值：${data}</p>
        `)
    })

    const tipObj = new EaseObj(tip)
    rects.on('mousemove', ({ clientX, clientY }, data) => {
      tipObj.endPos = { x: clientX, y: clientY }
      tipObj.animate = true
    })

    rects.on('mouseout', () => {
      tipObj.animate = false
      tip.style('display', 'none')
    })


    // rects.on('mousemove', ({ clientX, clientY }, data) => {
    //   tip.style('left', `${clientX}px`)
    //     .style('top', `${clientY}px`)
    // })

    // rects.on('mouseout', ({ clientX, clientY }, data) => {
    //   tip.style('left', `${clientX}px`)
    //     .style('top', `${clientY}px`)
    //     .style('display', 'none')
    // })
  </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7T1pAbN-1652424418577)(%E5%8F%AF%E8%A7%86%E5%8C%96.assets/image-20220513144223799.png)]

总结

  1. 一种可视化图形技术, 不同于cavans ,dic , 通过js 库绘制图形库
  2. 数据与代码分开, 数据驱动图形绘制的思想, 这样后面改数据,就可以驱动页面
  3. 对于样式组合需要做很多调整,这次只是了解下该门技术

总结下:
这块东西是之前想看的, 但是案例
的东西就是一个了解, 如果是工作还是直接使用
echarts/ antv,v-echarts这种插件来进行快速开发
应用场景就是, 以后如果要做数据可视化发展,
智慧大屏方面的, 这块的原理就需要了解了,
对比起来手绘出来的比较好看,是原理, 实用性上还是直接插件吧

文章参

考:

https://blog.csdn.net/happy_programer/article/details/119784845

小李科技
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js/d3.min.js_在5分钟内学习D3.js
cumi6497的博客
07-22 1720
js/d3.min.jsby Sohaib Nehal 通过Sohaib Nehal 在5分钟内学习D3.js (Learn D3.js in 5 minutes) 创建数据可视表示的简介 (An introduction to creating visual representations of your data) D3.js is a JavaScript library used t...
D3.js(三)：交互
Bule_daze的博客
03-31 690
d3-drag Drag-and-drop 是一种易学流行的交互手势：将指针指向目标对象，按下并且拖动它到一个新的位置，然后释放。D3 的 drag 提供了方便灵活并且抽象的拖拽交互。 例子 ????： I. 力导向图 II. 小球（密集恐惧症慎点） III. Draw Me ◎ d3.drag() 创建一个新的拖拽行为并返回自身。drag 既是一个对象，也是一个函数，通常通过 selection.c...
d3.v3.min.js
07-31
d3.v3.js是数据视图化非常棒的工具 --2018-7-31
D3.js分支图用法示例（动态鼠标可拖动节点、点击对应节点弹出对应页面、附带Echarts图表用法）
最新发布
千里之行，始于足下
05-17 332
里面有还有很多Echarts图表、点击D3js中的分支节点时可以弹出对应页面。具体细节不用改太多东西想研究的话去看官方文档，只需要改。方法里的图片和数据即可。
d3.min.js-3.5.5
04-04
d3.min.js 3.5.5 2015年4月最新
d3.js学习
Harrietjia的博客
03-24 335
d3.js学习
D3.js 学习笔记
热门推荐
林世广
08-22 1万+
路人甲：额，我需要学那么多才能开始学 D3 吗？心理压力有点点…大 馒头：不必，完全可以直接看“D3.js 学习笔记”学 D3，遇到不明白的地方，再看相关内容即可 路人乙：HTML、CSS 啥的，我从来都没用过，也没有关系吗？ 馒头：只要在 W3School ，分别看看这几个词是什么意思，是用来干什么的，再看几个简单例子即可，没有必要全掌握了再学习 D3。
d3.js入门-01简介、安装
yishuihanxun的博客
12-05 986
D3简介： d3是一款优秀的数据可视化工具，可以帮助我们创建较为复杂的可视化、拖拽、缩放 的数据视图。 他的优点： D3.js是一个开源项目，无需任何插件即可运行.它需要非常少的代码并提供以下好处和减号; 出色的数据可视化. 它是模块化的.您可以下载一小段您想要使用的D3.js.无需每次都加载整个库. 轻松构建图表组件. DOM操作. ...
D3
Dosth_Magic
10-31 481
1. HelloWorld Hello World 1 Hello World 2 d3.select("body").selectAll("p").text("www.decembercafe.org"); var p = d3.select("body") .selectAll("p") .text("www.ourd3
D3.js学习笔记
Achernar0208的博客
06-26 932
D3.js学习笔记
D3.js(一) ------初识
Missbelover的博客
12-06 2337
D3.js简介 D3.js是一个强大的数据可视化js语言，可以利用svg在网页上展示各种精美的矢量图. D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，D3 已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输...
d3.min.js d3.js
08-25
d3.min.js d3.js 绘制图标
d3.min.js学习安装包
06-05
d3是一个基于数据操作文档的JavaScript库。D3帮助您使用HTML、SVG和CSS将数据带入生活。D3对web标准的强调为您提供了现代浏览器的全部功能，而无需将自己绑定到一个专有的框架中，将强大的可视化组件和数据驱动的DOM操作方法结合起来。为了学习d3，我给大家上传了我的d3包
d3js-v4中文文档.pdf
01-21
D3 V4版本中文API文档PDF版，与V3版本不同之处就在于添加了canvas功能，同时API的调用方式也有所改动，比如axis、layout.tree等等
基于d3.v3和echarts关于部分国控地表数据的可视化
04-14
在本项目中，我们主要探讨的是如何利用d3.v3和echarts这两个强大的JavaScript库来实现部分国控地表数据的可视化。d3.v3是一个数据驱动的文档操作库，它允许开发者用数据来操作DOM元素，从而创建复杂的、动态的数据...
D3.js(v3版本）
qq_45655136的博客
03-27 943
D3.js <script src="https://d3js.org/d3.v6.min.js"></script> import * as d3 from "d3";//将内容导入到命名空间 const d3 = require("d3");//在节点中 1.svg 一种文本格式 给svg元素指定width和height值 <svg width="500" height="50"></svg> rect用于绘制矩形 (x和y用于指定矩形左上角的坐标)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值