d3.js如何在曲线上每个点添加文本

Question

d3.js如何在曲线上每个点添加文本

发布于
2018-01-14

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<link rel="stylesheet" href="css/style.css" />-->
    <style>
        #container {
            width: 500px;
            height: 250px;
            background-color: #ccc;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        path {
            fill: none;
            stroke: cornflowerblue;
            stroke-width: 2px;
        }
        
        .domain,
        .tick line {
            stroke: gray;
            stroke-width: 1px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script src="./d3.js" charset="utf-8"></script>
<script>
    var width = 500,
        height = 250,
        margin = {
            left: 50,
            top: 30,
            right: 20,
            bottom: 20
        },
        g_width = width - margin.left - margin.right,
        g_height = height - margin.top - margin.bottom;

    //获取div，向里面添加svg
    var svg = d3.select("#container")
        .append("svg:svg") //在“container”中插入svg
        .attr("width", width) //设置svg的宽度
        .attr("height", height) //设置svg的高度

    //添加g元素
    var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    var data = [0, 1, 3, 5, 9, 4, 2, 3, 6, 8] //定义一个数组，里面放置了一些任意数字
    var scale_x = d3.scaleLinear() //把曲线沿x轴按比例放大
        .domain([0, data.length - 1])
        .range([0, g_width])
    var scale_y = d3.scaleLinear() //把曲线沿y轴按比例放大
        .domain([0, d3.max(data)])
        .range([200, 0]) //使y轴按照数学中的方式显示，而不是浏览器的格式

    var line_generator = d3.line() //d3中绘制曲线的函数
        .x(function(d, i) {
            return scale_x(i);
        }) //曲线中x的值
        .y(function(d) {
            return scale_y(d);
        }) //曲线中y的值
        .curve(d3.curveCardinal)
    //            .interpolate("curveCardinal") //把曲线设置光滑

    d3.select("g")
        .append("path")
        .attr("d", line_generator(data))
    
    var x_axis = d3.axisBottom(scale_x),
        y_axis = d3.axisLeft().scale(scale_y)
    
            g.append("g")
                .call(x_axis)
                .attr("transform", "translate(0," + g_height + ")")
    
            g.append("g")
                .call(y_axis)
                .append("text")
                .text("price(￥)")
                .attr("transform", "rotate(-90)") //text旋转-90°
                .attr("text-anchor", "end") //字体尾部对齐
                .attr("dy", "1em") //沿y轴平移一个字体的大小
    
    
    var g = svg.selectAll('circle')
        .data(data)
        .enter()
        .append('g')
        .append('circle')
        .attr('class', 'linecircle')
        .attr('cx', (d,i) => scale_x(i)+50)
        .attr('cy', d => scale_y(d)+30)
        .attr('r', 3.5)
        .on('mouseover', function() {
            d3.select(this).transition().duration(500).attr('r', 5);
        })
        .on('mouseout', function() {
            d3.select(this).transition().duration(500).attr('r', 3.5);
        });

</script>

</html>

javascript html css

阅读 6.4k

1 个回答

得票最新

Cribug8080

123137

发布于
2018-01-14

✓ 已被采纳

是不是这个样子
图片描述

<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<link rel="stylesheet" href="css/style.css" />-->
    <style>
        #container {
            width: 500px;
            height: 250px;
            background-color: #ccc;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        path {
            fill: none;
            stroke: cornflowerblue;
            stroke-width: 2px;
        }
        
        .domain,
        .tick line {
            stroke: gray;
            stroke-width: 1px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script src="./../d3.js" charset="utf-8"></script>
<script>
    var width = 500,
        height = 250,
        margin = {
            left: 50,
            top: 30,
            right: 20,
            bottom: 20
        },
        g_width = width - margin.left - margin.right,
        g_height = height - margin.top - margin.bottom;

    //获取div，向里面添加svg
    var svg = d3.select("#container")
        .append("svg:svg") //在“container”中插入svg
        .attr("width", width) //设置svg的宽度
        .attr("height", height) //设置svg的高度

    //添加g元素
    var g = d3.select("svg")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    var data = [0, 1, 3, 5, 9, 4, 2, 3, 6, 8] //定义一个数组，里面放置了一些任意数字
    var scale_x = d3.scaleLinear() //把曲线沿x轴按比例放大
        .domain([0, data.length - 1])
        .range([0, g_width])
    var scale_y = d3.scaleLinear() //把曲线沿y轴按比例放大
        .domain([0, d3.max(data)])
        .range([200, 0]) //使y轴按照数学中的方式显示，而不是浏览器的格式

    var line_generator = d3.line() //d3中绘制曲线的函数
        .x(function(d, i) {
            return scale_x(i);
        }) //曲线中x的值
        .y(function(d) {
            return scale_y(d);
        }) //曲线中y的值
        .curve(d3.curveCardinal)
        //            .interpolate("curveCardinal") //把曲线设置光滑

    d3.select("g")
        .append("path")
        .attr("d", line_generator(data))

    var x_axis = d3.axisBottom(scale_x),
        y_axis = d3.axisLeft().scale(scale_y)

    g.append("g")
        .call(x_axis)
        .attr("transform", "translate(0," + g_height + ")")

    g.append("g")
        .call(y_axis)
        .append("text")
        .text("price(￥)")
        .attr("transform", "rotate(-90)") //text旋转-90°
        .attr("text-anchor", "end") //字体尾部对齐
        .attr("dy", "1em") //沿y轴平移一个字体的大小


    var g = svg.selectAll('circle')
        .data(data)
        .enter()
        .append('g');
    g.append('circle')
        .attr('class', 'linecircle')
        .attr('cx', (d, i) => scale_x(i) + 50)
        .attr('cy', d => scale_y(d) + 30)
        .attr('r', 3.5)
        .on('mouseover', function() {
            d3.select(this).transition().duration(500).attr('r', 5);
        })
        .on('mouseout', function() {
            d3.select(this).transition().duration(500).attr('r', 3.5);
        });
    // <text x="20" y="20" font-family="sans-serif" font-size="20px" fill="red">Hello!</text>
    g.append('text')
        .attr('class', 'text')
        .attr('x', (d, i) => scale_x(i) + 50)
        .attr('y', d => scale_y(d) + 20)
        .text(d => d)
        .attr("font-size", "14px")
        .attr("fill", "blue");
</script>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

d3.js如何在曲线上每个点添加文本

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？