d3成神之路（三）：折线图

雨点打透心脏的1/2处 2022-09-09 13:59 96阅读 0赞

<!DOCTYPE html>
    <html>
      <head>
        <title>先做一个柱状图</title>
      </head>
    
    <body>
      <svg id="main" width="500" height="500"></svg>
    
      <script src="https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js"></script>
      <script> const svg = d3.select("#main") const margin = { top: 30, right: 30, bottom: 30, left: 30 } const width = svg.attr('width') const height = svg.attr('height') const data = [ { name: 'a', value: 1 }, { name: 'b', value: 2 }, { name: 'c', value: 3 }, { name: 'd', value: 4 }, { name: 'e', value: 5 }, ] const innerHeight = height - margin.top - margin.bottom const innerWidth = width - margin.left - margin.right const xScale = d3.scaleBand() .domain(data.map(x => x.name)) .range([0, innerWidth]) .padding(0.5) const yScale = d3.scaleLinear() .domain([0, d3.max(data, x=>x.value)]) .range([innerHeight, 0]) const g = svg.append('g') .attr('id', 'maingroup') .attr('transform', `translate(${ margin.top}, ${ margin.left})`) const yAxis = d3.axisLeft(yScale) g.append('g').call(yAxis) const xAxis = d3.axisBottom(xScale) g.append('g').call(xAxis).attr('transform',`translate(0, ${ innerHeight})`) const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => xScale(d.name)) .y(d => yScale(d.value)) g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr('d', line) </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85a2Q6KGr5p2l_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1b5bad170f0948a7a63a1341e98d8c9c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关 java 成神之路 (三)

上次说到了，多线程境况下的问题，今天我们来简单处理一下这个问题。在spring 初始实例的时候会配置一个叫 scope 这个值，如果没有配置默认是 Prototype。

痛定思痛。/ 2022年09月21日 13:22/ 0 赞/ 181 阅读

相关 d3成神之路(七)：缩放区域的使用

缩放区域使用的 `zoom` 这个api https://github.com/d3/d3-zoom/blob/v3.0.0/README.md\\_zoom 使用d3.z

女爷i/ 2022年09月10日 13:15/ 0 赞/ 99 阅读

相关 d3成神之路(五)：扇形图，饼图

制作扇形其实也是使用 svg的 path 这个属性，重要的是计算各个扇形区域的点，与弧度效果图 ![在这里插入图片描述][watermark_type_ZHJva

Love The Way You Lie/ 2022年09月10日 07:11/ 0 赞/ 137 阅读

相关 d3成神之路(四)：D3API思维导图

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85

叁歲伎倆/ 2022年09月10日 02:18/ 0 赞/ 114 阅读

相关 d3成神之路（三）：折线图

<!DOCTYPE html> <html> <head> <title>先做一个柱状图</title> </head>

雨点打透心脏的1/2处/ 2022年09月09日 13:59/ 0 赞/ 97 阅读

相关 d3成神之路，学习计划

基础图表开发先开发一条基础版本的图表，如柱状图，折线图，饼图，散点图，树图，一图多例基于基础版本的图表，开发多个样例，参照[echarts的示例中心][ec

青旅半醒/ 2022年09月09日 13:48/ 0 赞/ 92 阅读

相关 d3成神之路(二)：第二个柱状图

核心代码是理解 `data(data)` `join("rect")` `.attr("height", d => yScale(0) - yScale(d.val

喜欢ヅ旅行/ 2022年09月09日 11:51/ 0 赞/ 86 阅读

相关 java 成神之路

[http://www.hollischuang.com/archives/1001][http_www.hollischuang.com_archives_1001] [

蔚落/ 2022年06月12日 06:18/ 0 赞/ 207 阅读

相关 java 成神之路

摘自：纯洁的微笑一、基础篇 JVM JVM内存结构堆、栈、方法区、直接内存、堆和栈区别 Java内存模型内存可见性、重排序、顺序一致性、volati

喜欢ヅ旅行/ 2022年05月13日 21:04/ 0 赞/ 195 阅读

相关 JAVA成神之路

0 1 面向对象 → 什么是面向对象面向对象、面向过程面向对象的三大基本特征和五大基本原则 → 平台无关性 Java 如何实现的平台无关 J

心已赠人/ 2022年01月29日 07:15/ 0 赞/ 861 阅读