te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Area Chart with smooth lines possible with D3.js? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Area Chart with smooth lines possible with D3.js? - Stack Overflow

    javascript - Area Chart with smooth lines possible with D3.js? - Stack Overflow

    programmeradmin4浏览0评论

    I am creating area chart with D3.js and I make it with smooth line. Is it possible?

    In my code I just create svg and put line and area on. I use dummy data.

    Here is my code below： /

    // Data
var lineData = [ { "x": 0,    "y": 250},  { "x": 40,   "y": 170},
             { "x": 80,   "y": 140},  { "x": 120,  "y": 220},
             { "x": 160,  "y": 220},  { "x": 200,  "y": 190},
             { "x": 240,  "y": 170},  { "x": 280,  "y": 140},
             { "x": 320,  "y": 200},  { "x": 360,  "y": 180},
             { "x": 400,  "y": 190},  { "x": 440,  "y": 210},
             { "x": 480,  "y": 170},  { "x": 500,  "y": 200},
           ];             

// Drew SVG
var svg = d3.select("body").append("svg")
                       .attr("width", 500)
                       .attr("height", 230);

var area = d3.svg.area()
             .x(function(d)  {  return x(d.x); })
             .y0(230)
             .y1(function(d) {  return y(d.y); });

// Draw line
var lineFunction = d3.svg.line()
           .x(function(d) { return d.x; })
           .y(function(d) { return d.y; })
           .interpolate("basis");                 

var x = d3.scale.linear().range([0, 500]);
var y = d3.scale.linear().range([0, 230]);

x.domain(d3.extent(lineData,  function(d) { return d.x; }));
y.domain([0, d3.max(lineData, function(d) { return d.y; })]);

svg.append("path")
    .attr("class", "area")
    .attr("d", area(lineData));

var linegraph = svg.append("path")
        .attr("d", lineFunction(lineData))
        .attr("stroke", "#549fc2")
        .attr("stroke-width", 0)
        .attr("fill", "none");

    Thanks in advance.

    I am creating area chart with D3.js and I make it with smooth line. Is it possible?

    In my code I just create svg and put line and area on. I use dummy data.

    Here is my code below： http://jsfiddle/sota0805/mv48H/

    // Data
var lineData = [ { "x": 0,    "y": 250},  { "x": 40,   "y": 170},
             { "x": 80,   "y": 140},  { "x": 120,  "y": 220},
             { "x": 160,  "y": 220},  { "x": 200,  "y": 190},
             { "x": 240,  "y": 170},  { "x": 280,  "y": 140},
             { "x": 320,  "y": 200},  { "x": 360,  "y": 180},
             { "x": 400,  "y": 190},  { "x": 440,  "y": 210},
             { "x": 480,  "y": 170},  { "x": 500,  "y": 200},
           ];             

// Drew SVG
var svg = d3.select("body").append("svg")
                       .attr("width", 500)
                       .attr("height", 230);

var area = d3.svg.area()
             .x(function(d)  {  return x(d.x); })
             .y0(230)
             .y1(function(d) {  return y(d.y); });

// Draw line
var lineFunction = d3.svg.line()
           .x(function(d) { return d.x; })
           .y(function(d) { return d.y; })
           .interpolate("basis");                 

var x = d3.scale.linear().range([0, 500]);
var y = d3.scale.linear().range([0, 230]);

x.domain(d3.extent(lineData,  function(d) { return d.x; }));
y.domain([0, d3.max(lineData, function(d) { return d.y; })]);

svg.append("path")
    .attr("class", "area")
    .attr("d", area(lineData));

var linegraph = svg.append("path")
        .attr("d", lineFunction(lineData))
        .attr("stroke", "#549fc2")
        .attr("stroke-width", 0)
        .attr("fill", "none");

    Thanks in advance.

    • javascript
    • d3.js
    • charts
    • stacked-area-chart
    Share Improve this question asked Jun 22, 2014 at 14:19 Sm YamashitaSm Yamashita 2544 silver badges14 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 15

    You have to add the interpolate on the d3.area function, like so:

    var area = d3.svg.area()
            .interpolate("monotone")  //Here
            .x(function(d)  {  return x(d.x); })
            .y0(230)
            .y1(function(d) {  return y(d.y); });

    More options could be found here: https://www.dashingd3js./svg-paths-and-d3js near the end of the page

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论