Fatal编程技术网
  • javascript/
  • Javascript 多折线图直接追加路径

Javascript 多折线图直接追加路径

javascript d3.js

Javascript 多折线图直接追加路径,javascript,d3.js,Javascript,D3.js,我想画一个多重折线图。我直接附加路径。 但是，它抛出了一个错误： 错误：解析d=“MNaN，253.83…”时出现问题 此错误发生在.attr（“d”，行）上 数据在追加之前被解析。我已经使用调试器检查了数据，这是正确的 这是我的代码： <body style="overflow: hidden;height: 100%;"> <script> // ====================================================

我想画一个多重折线图。我直接附加路径。 但是，它抛出了一个错误：

错误：解析d=“MNaN，253.83…”时出现问题

此错误发生在
.attr（“d”，行）
上

数据在追加之前被解析。我已经使用调试器检查了数据，这是正确的

这是我的代码：

<body style="overflow: hidden;height: 100%;">
    <script>

    // ===========================================================

    let x, y;
    let Line_chart;
    let xAxis, yAxis;
    let xAxisSub;
    let line;
    let focus;
    let svg;
    let width, hwight, aspect;
    let xAxisGrid;
    let parseTime = d3.timeParse("%H:%M:%SZ");
    var rect;


    let orgData = [
        [
            {"logtime":"15:01:38Z","Param":"10.0"},
            {"logtime":"15:01:39Z","Param":"11.0"},
            {"logtime":"15:01:40Z","Param":"12.0"},
            {"logtime":"15:01:41Z","Param":"13.0"},
            {"logtime":"15:01:42Z","Param":"14.0"}
        ],
        [
            {"logtime":"15:01:38Z","Param":"0.0"},
            {"logtime":"15:01:39Z","Param":"1.0"},
            {"logtime":"15:01:40Z","Param":"2.0"},
            {"logtime":"15:01:41Z","Param":"3.0"},
            {"logtime":"15:01:42Z","Param":"4.0"}
        ],
        [
            {"logtime":"15:01:38Z","Param":"4.0"},
            {"logtime":"15:01:39Z","Param":"5.0"},
            {"logtime":"15:01:40Z","Param":"6.0"},
            {"logtime":"15:01:41Z","Param":"7.0"},
            {"logtime":"15:01:42Z","Param":"8.0"}
        ]
    ];





    function initSVG(divid, _width, _height) {

        let margin = { top: 30, right: 30, bottom: 50, left: 80 };
        width = document.getElementById("graph").clientWidth; //-margin.left - margin.right;
        height = document.getElementById("graph").clientWidth * (_height / _width);

        aspect = _width / _height;

        var cWidth = width + margin.left + margin.right,
            cHeight = height - margin.top - margin.bottom;

        svg = d3.select("#" + divid)
            .append("svg")
            .attr("width", width).attr("height", width * aspect)
            .attr("viewBox", "0 0 " + cWidth + " " + cHeight + "")
            .attr("preserveAspectRatio", "xMinYMin meet");

        x = d3.scaleTime().range([0, width])
        y = d3.scaleLinear().range([height, 0]);

        focus = svg.append("g")
            .attr("class", "focus")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        xAxis = d3.axisBottom(x)
            .tickFormat(d3.timeFormat('%H:%M'))
            .tickSize(-height, 0)
            .tickPadding(5)
            .ticks(6);

        yAxis = d3.axisLeft(y)
            .ticks(6);

        line = d3.line()
            .defined(function(d) { return d.time != null; })
            .x(function(d) { return x(d.time); })
            .y(function(d) { return y(d.val); });

        Line_chart = svg.append("g")
            .attr("class", "focus")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("clip-path", "url(#clip)");
    }

    // ===========================================================


    function bindData() {

        var parameter="Param";

        let tmp = [];
        let data = [];
        let myData =[];

        let yMax = 15;
        let yMin = 0;

        var duration = 0;
        var nullObj = [];
        nullObj["Time"] = null;

        for (let i = 0; i < orgData.length; i++) {
            myData[i]=[];
            tmp = orgData[i];

            for (let j = 0; j < tmp.length; j++) {
                if (tmp[j][parameter]) {
                    let obj = {};
                    obj["time"] =parseTime(tmp[j].logtime);
                    obj["val"] = tmp[j][parameter];
                    myData[i].push(obj);
                }
            }
        }
        let xScale = d3.scaleBand()
            .domain(data.map(function(d) { return d.time; }));

        let yScale = d3.scaleLinear()
            .domain([yMin, yMax])
            .range([height, 0]);

        x.domain(d3.extent(myData, function(d) { return d.time; })).nice(); 
        y.domain([yMin, yMax]);

        var h = height;
        focus.append("g")
            .attr("class", ".x.axis axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        focus.append("g")
            .attr("class", "axis axis--y")
            .call(yAxis);

        for (let i = 0; i < myData.length; i++) {
            Line_chart.append("path")
                .datum(myData[i])
                .attr("class", "line" + i)
                .attr("d", line)
                .attr("fill", "none")
                .attr("stroke", d3.schemeCategory10[i])
                .attr("stroke-width", 1.8)
                .attr("stroke-linejoin", "round")
                .attr("stroke-linecap", "round");

        }
    }

    // ===========================================================

    </script>
    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <div id="graph" class="svg-container" style="background-color:#ffffff; ">
        <script>

        initSVG("graph", 300, 150);
       bindData();
        </script>
    </div>

</body>



// ===========================================================
设x，y；
让线图；
让xAxis，yAxis；
让xAxisSub；
让线；
让我们聚焦；
让svg；
让宽度、宽度、方向；
让xAxisGrid；
让parseTime=d3.timeParse（“%H:%M:%SZ”）；
var-rect；
设orgData=[
[
{“logtime”：“15:01:38Z”，“Param”：“10.0”}，
{“logtime”：“15:01:39Z”，“Param”：“11.0”}，
{“logtime”：“15:01:40Z”，“Param”：“12.0”}，
{“logtime”：“15:01:41Z”，“Param”：“13.0”}，
{“logtime”：“15:01:42Z”，“Param”：“14.0”}
],
[
{“logtime”：“15:01:38Z”，“Param”：“0.0”}，
{“logtime”：“15:01:39Z”，“Param”：“1.0”}，
{“logtime”：“15:01:40Z”，“Param”：“2.0”}，
{“logtime”：“15:01:41Z”，“Param”：“3.0”}，
{“logtime”：“15:01:42Z”，“Param”：“4.0”}
],
[
{“logtime”：“15:01:38Z”，“Param”：“4.0”}，
{“logtime”：“15:01:39Z”，“Param”：“5.0”}，
{“logtime”：“15:01:40Z”，“Param”：“6.0”}，
{“logtime”：“15:01:41Z”，“Param”：“7.0”}，
{“logtime”：“15:01:42Z”，“Param”：“8.0”}
]
];
函数initSVG（divid、宽度、高度）{
让边距={top:30，right:30，bottom:50，left:80}；
宽度=document.getElementById（“图形”）.clientWidth；//-margin.left-margin.right；
高度=document.getElementById（“图形”）.clientWidth*（\u高度/\u宽度）；
纵横比=_宽度/_高度；
var cWidth=宽度+边距.left+边距.right，
cHeight=高度-边距.top-边距.bottom；
svg=d3。选择（“#”+divid）
.append（“svg”）
.attr（“宽度”，宽度）.attr（“高度”，宽度*纵横比）
.attr（“视图框”、“0 0”+cWidth+“”+cHeight+“”）
.attr（“保存Aspectratio”、“xMinYMin会议”）；
x=d3.scaleTime（）.range（[0，宽度]）
y=d3.scaleLinear（）.range（[height，0]）；
focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
xAxis=d3.轴底（x）
.tickFormat（d3.timeFormat（“%H:%M”））
.1.1尺寸（-0高）
.1（5）
.蜱（6）；
yAxis=d3.轴左（y）
.蜱（6）；
line=d3.line（）
.defined（函数（d）{返回d.time！=null；}）
.x（函数（d）{返回x（d.time）；}）
.y（函数（d）{返回y（d.val）；}）；
Line_chart=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“剪辑路径”、“url（#剪辑）”）；
}
// ===========================================================
函数bindData（）{
var parameter=“Param”；
设tmp=[]；
让数据=[]；
让myData=[]；
设yMax=15；
设yMin=0；
var持续时间=0；
var nullObj=[]；
nullObj[“时间”]=null；
for（设i=0；i
我希望图表上有三条线。您能告诉我有什么问题吗？

您的域计算

x.domain(d3.extent(myData, function(d) { return d.time; })).nice();
…不正确，因为您有一个阵列，而不仅仅是平面阵列

有几种方法可以展平阵列阵列。例如：

x.domain(d3.extent(myData.reduce(function(a, c) {
    return a.concat(c);
  }, []), function(d) {
    return d.time;
  })).nice();
以下是更改后的代码：


// ===========================================================
设x，y；
让线图；
让xAxis，yAxis；
让xAxisSub；
让线；
让我们聚焦；
让svg；
让宽度、宽度、方向；
让xAxisGrid；
让parseTime=d3.timeParse（“%H:%M:%SZ”）；
var-rect；
设orgData=[
[{
“日志时间”：“15:01:38Z”，
“参数”：“10.0”
},
{
“日志时间”：“15:01:39Z”，
“参数”：“11.0”
},
{
“日志时间”：“15:01:40Z”，
“参数”：“12.0”
},
{
“日志时间”：