鍍金池/ 問答/HTML/ d3.js如何在曲線上每個(gè)點(diǎn)添加文本

d3.js如何在曲線上每個(gè)點(diǎn)添加文本

<!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) //設(shè)置svg的寬度
        .attr("height", height) //設(shè)置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] //定義一個(gè)數(shù)組，里面放置了一些任意數(shù)字
    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軸按照數(shù)學(xué)中的方式顯示，而不是瀏覽器的格式

    var line_generator = d3.line() //d3中繪制曲線的函數(shù)
        .x(function(d, i) {
            return scale_x(i);
        }) //曲線中x的值
        .y(function(d) {
            return scale_y(d);
        }) //曲線中y的值
        .curve(d3.curveCardinal)
    //            .interpolate("curveCardinal") //把曲線設(shè)置光滑

    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旋轉(zhuǎn)-90°
                .attr("text-anchor", "end") //字體尾部對齊
                .attr("dy", "1em") //沿y軸平移一個(gè)字體的大小
    
    
    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>

clipboard.png

回答
編輯回答
單眼皮

是不是這個(gè)樣子
圖片描述

<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) //設(shè)置svg的寬度
        .attr("height", height) //設(shè)置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] //定義一個(gè)數(shù)組，里面放置了一些任意數(shù)字
    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軸按照數(shù)學(xué)中的方式顯示，而不是瀏覽器的格式

    var line_generator = d3.line() //d3中繪制曲線的函數(shù)
        .x(function(d, i) {
            return scale_x(i);
        }) //曲線中x的值
        .y(function(d) {
            return scale_y(d);
        }) //曲線中y的值
        .curve(d3.curveCardinal)
        //            .interpolate("curveCardinal") //把曲線設(shè)置光滑

    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旋轉(zhuǎn)-90°
        .attr("text-anchor", "end") //字體尾部對齊
        .attr("dy", "1em") //沿y軸平移一個(gè)字體的大小


    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>
2017年4月3日 20:03