&“内插&"不是功能 [英] "Interpolate" is not a function

问题描述

我是D3的新手，正在尝试一些图表.在使用D3 V4构建折线图时，遇到了以下错误.

I am new to D3 and experimenting on few charts . While building a line chart using D3 V4 , I came across following errors .

d3.line(...).x(...).y(...).interpolate不是函数

d3.line(...).x(...).y(...).interpolate is not a function

我认为此错误是由于D3 v4中的插值函数不可用所致.如果有人可以为我提供插值功能的替换功能，那将是非常不错的.

I assume this error is due to the function interpolate not being available in D3 v4 . It would be great if someone could help me with the replacement function for the interpolate function .

我的代码在下面的链接

https://ghostbin.com/paste/ztans

推荐答案

在D3 v4.x中，行生成器采用

In D3 v4.x, the line generator takes a curve to define the interpolation:

虽然将线定义为二维[x，y]点的序列，并且通过轮廓线和基线类似地定义区域，但是仍然存在将这种离散表示转换为连续形状的任务:即，如何在点之间进行插值.为此，提供了各种曲线.[...]通常，曲线不是直接构建或使用的，而是传递给 line .curve 和 区域.曲线.(重点是我的)

While lines are defined as a sequence of two-dimensional [x, y] points, and areas are similarly defined by a topline and a baseline, there remains the task of transforming this discrete representation into a continuous shape: i.e., how to interpolate between the points. A variety of curves are provided for this purpose [...] Curves are typically not constructed or used directly, instead being passed to line.curve and area.curve. (emphases mine)

所以，这个:

var lineFun = d3.line()
    .x(function(d){return d.month*50})
    .y(function(d){return height - (10* d.Sales)})
    .interpolate("basis")

应该是:

var lineFun = d3.line()
    .x(function(d){return d.month*50})
    .y(function(d){return height - (10* d.Sales)})
    .curve(d3.curveBasis);

这是您所做的更改的代码:

Here is your code with that change:

var w = 700;
var height = 300;
var padding = 2;
var border = 2

var dataset=[5,7,2,6,1,10,8,9,11,13,16,40,15,20,25,35,36,25,28,18,17,4,22,5,3,35,46,57];

var monthlySales =[
    {
        "month":1,
        "Sales":10
    },
    {
        "month":2,
        "Sales":25
    },
    {
        "month":3,
        "Sales":12
    },
    {
        "month":4,
        "Sales":16
    },
    {
        "month":5,
        "Sales":17
    }
    ];

onload();

function onload(){

    var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height",height)

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attrs({
            x : function(d,i){
                return (i * (w/dataset.length)); },
            y : function(d){ return (height- (d*4))},
            width: (w/dataset.length)-padding,
            height:function(d){ return(d*4); },
            fill : function(d){return "rgb(0,"+(d*10)+",0)" ;}
        });

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d){ return d})
        .attrs({

            x: function(d,i){ return (i * (w/dataset.length)) + ((((w/dataset.length) - padding)/2))},
            y: function(d) {return (height-(d*4))},
            "text-anchor" : "middle"
        })


    var lineFun = d3.line()
        .x(function(d){return d.month*50})
        .y(function(d){return height - (10* d.Sales)})
        .curve(d3.curveBasis);


    var svgLine = d3.select("body").append("svg")
        .attr("width",w)
        .attr("height",height);

    var svgPath = svgLine.append("path")
        .attrs({
            d: lineFun(monthlySales),
            "stroke": "purple",
            "stroke-width":2,
            "fill" :"none"
        })

    svgLine.selectAll("text")
        .data(monthlySales)
        .enter()
        .append("text")
        .text(function(d){return d.Sales})
        .attrs({
            x : function(d){return d.month*50 - 10},
            y : function(d){return height-(10*d.Sales) + 10},
            "font-size":"12px",
            "fill" : "#666666",
            "font-family":"sans-serif",
            "dx":".35em",
            "text-anchor":"start",
            "font-weight": function(d,i){
                if(i==0 || i == monthlySales.length-1){
                    return "bold"
                }
                else{
                    return "normal"
                }
            }
        })



}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

这篇关于&“内插&"不是功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！