d3.js中没有外部数据的双Y轴折线图

我是d3（和javascript和html）的新手，但请耐心等待。我的总体目标是在FileMaker Pro（FMP - 关系数据库）中实施一些d3图表，特别是其移动版本FileMaker Go。这是因为FMP内的制图选项有限。 FMP确实提供了一个web浏览器，可以呈现网址，或html和javascript代码，而无需互联网连接。我复制了设在D3网站的一些例子，并希望复制这个例子，但不必求助于外部CSV文件：d3.js中没有外部数据的双Y轴折线图

http://bl.ocks.org/d3noob/e34791a32a54e015f57d

我一直在使用一个外部的CSV复制在浏览器上面的例子文件，但尚未在FMP中。

我试图去关注其他一些数据嵌入在d3代码中但没有成功的例子。 FMP允许我进行计算/文本替换，以“正确”格式构造数据并将其插入到d3代码中，从而允许图表动态更新。这也适用于d3库。我已经成功地应用于这：

http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

基于上述d3noob例如，阅读关于如何“在线”的数据应该在D3代码内部结构，我想出了下面的代码，但它不起作用。我修改了x轴的代码以允许连续数据而不是日期，并且包含了我的数据而不是原始示例的数据。

有人能告诉我如何将d3代码和数据结构化为与“内联”数据一起工作吗？此外，我想为“开放”数据序列（y1 - 第二个或右侧y轴）实现一条垂直线，以标识该数据序列的最大值。这将是一种不同的颜色，并从适当的x值（其中y1 = 0）到曲线的峰值（y1 = 1300，下面数据中的x = 25）垂直上升。

任何帮助，将不胜感激 - 谢谢提前

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { font: 12px Arial;} 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

<script> 

var margin = {top: 30, right: 40, bottom: 30, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 270 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%d-%b-%y").parse; 

var x = d3.scale.linear().range([0, width]); 
var y0 = d3.scale.linear().range([height, 0]); 
var y1 = d3.scale.linear().range([height, 0]); 

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(10); 

var yAxisLeft = d3.svg.axis().scale(y0) 
    .orient("left").ticks(5); 

var yAxisRight = d3.svg.axis().scale(y1) 
    .orient("right").ticks(5); 

var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y0(d.close); }); 

var valueline2 = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y1(d.open); }); 

var svg = d3.select("body") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", 
       "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
var data = [ 
{date: "0",close: "59.8",open: "897"}, 
{date: "1",close: "63.3",open: "943.5"}, 
{date: "2",close: "66.6",open: "988"}, 
{date: "3",close: "69.5",open: "1025.5"}, 
{date: "4",close: "72.2",open: "1061"}, 
{date: "5",close: "74.7",open: "1092.5"}, 
{date: "6",close: "76.9",open: "1119.5"}, 
{date: "7",close: "79",open: "1146"}, 
{date: "8",close: "80.8",open: "1167"}, 
{date: "9",close: "82.5",open: "1187.5"}, 
{date: "10",close: "84.1",open: "1205.5"}, 
{date: "11",close: "85.5",open: "1220.5"}, 
{date: "12",close: "86.8",open: "1235"}, 
{date: "13",close: "87.9",open: "1245.5"}, 
{date: "14",close: "89",open: "1257"}, 
{date: "15",close: "90",open: "1266"}, 
{date: "16",close: "90.9",open: "1273.5"}, 
{date: "17",close: "91.7",open: "1280.5"}, 
{date: "18",close: "92.4",open: "1285"}, 
{date: "19",close: "93.1",open: "1290.5"}, 
{date: "20",close: "93.7",open: "1293.5"}, 
{date: "21",close: "94.3",open: "1296.5"}, 
{date: "22",close: "94.8",open: "1299"}, 
{date: "23",close: "95.2",open: "1299"}, 
{date: "24",close: "95.6",open: "1299.5"}, 
{date: "25",close: "96",open: "1300"}, 
{date: "26",close: "96.4",open: "1299.6"}, 
{date: "27",close: "96.7",open: "1299.5"}, 
{date: "28",close: "97",open: "1298"}, 
{date: "29",close: "97.3",open: "1297.5"}, 
{date: "30",close: "97.5",open: "1294.5"}, 
{date: "31",close: "97.7",open: "1291.5"}, 
{date: "32",close: "97.9",open: "1289.5"}, 
{date: "33",close: "98.1",open: "1286.5"}, 
{date: "34",close: "98.3",open: "1284.5"}, 
{date: "35",close: "98.4",open: "1280"}, 
{date: "36",close: "98.6",open: "1277"}, 
{date: "37",close: "98.7",open: "1273.5"}, 
{date: "38",close: "98.8",open: "1269"}, 
{date: "39",close: "98.9",open: "1265.5"}, 
{date: "40",close: "99",open: "1261"}, 
{date: "41",close: "99.1",open: "1256.5"}, 
{date: "42",close: "99.2",open: "1253"}, 
{date: "43",close: "99.3",open: "1248.5"}, 
{date: "44",close: "99.3",open: "1243.5"}, 
{date: "45",close: "99.4",open: "1239"}, 
{date: "46",close: "99.4",open: "1233"}, 
{date: "47",close: "99.5",open: "1229.5"}, 
{date: "48",close: "99.5",open: "1223.5"}, 
{date: "49",close: "99.6",open: "1220"}, 
{date: "50",close: "99.6",open: "1214"}, 
{date: "51",close: "99.6",open: "1208"}, 
{date: "52",close: "99.7",open: "1204.5"}, 
{date: "53",close: "99.7",open: "1198.5"}, 
{date: "54",close: "99.7",open: "1193.5"}, 
{date: "55",close: "99.8",open: "1189"}, 
{date: "56",close: "99.8",open: "1183"}, 
{date: "57",close: "99.8",open: "1178"}, 
{date: "58",close: "99.8",open: "1172"}, 
{date: "59",close: "99.8",open: "1167"}, 
{date: "60",close: "99.8",open: "1161"}, 
{date: "61",close: "99.9",open: "1156.5"}, 
{date: "62",close: "99.9",open: "1151.5"}, 
{date: "63",close: "99.9",open: "1145.5"}, 
{date: "64",close: "99.9",open: "1140.5"}, 
{date: "65",close: "99.9",open: "1134.5"}, 
{date: "66",close: "99.9",open: "1128.5"}, 
{date: "67",close: "99.9",open: "1123.5"}, 
{date: "68",close: "99.9",open: "1117.5"}, 
{date: "69",close: "99.9",open: "1112.5"}, 
{date: "70",close: "99.9",open: "1106.5"}, 
{date: "71",close: "99.9",open: "1100.5"}, 
{date: "72",close: "99.9",open: "1095.5"}, 
{date: "73",close: "100",open: "1091"}, 
{date: "74",close: "100",open: "1086"}, 
{date: "75",close: "100",open: "1080"}, 
{date: "76",close: "100",open: "1074"}, 
{date: "77",close: "100",open: "1069"}, 
{date: "78",close: "100",open: "1063"}, 
{date: "79",close: "100",open: "1058"}, 
{date: "80",close: "100",open: "1052"}, 
{date: "81",close: "100",open: "1046"}, 
{date: "82",close: "100",open: "1041"}, 
{date: "83",close: "100",open: "1035"}, 
{date: "84",close: "100",open: "1030"}, 
{date: "85",close: "100",open: "1024"}, 
{date: "86",close: "100",open: "1018"}, 
{date: "87",close: "100",open: "1013"}, 
{date: "88",close: "100",open: "1007"}, 
{date: "89",close: "100",open: "1002"}, 
{date: "90",close: "100",open: "996"}, 
{date: "91",close: "100",open: "990"}, 
{date: "92",close: "100",open: "985"}, 
{date: "93",close: "100",open: "979"}, 
{date: "94",close: "100",open: "974"}, 
{date: "95",close: "100",open: "968"}, 
{date: "96",close: "100",open: "962"}, 
{date: "97",close: "100",open: "957"}, 
{date: "98",close: "100",open: "951"}, 
{date: "99",close: "100",open: "946"}, 
{date: "100",close: "100",open: "940"}, 
]; 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y0.domain([0, d3.max(data, function(d) { 
     return Math.max(d.close); })]); 
    y1.domain([0, d3.max(data, function(d) { 
     return Math.max(d.open); })]); 

    svg.append("path")  // Add the valueline path. 
     .attr("d", valueline(data)); 

    svg.append("path")  // Add the valueline2 path. 
     .style("stroke", "red") 
     .attr("d", valueline2(data)); 

    svg.append("g")   // Add the X Axis 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .style("fill", "steelblue") 
     .call(yAxisLeft); 

    svg.append("g")    
     .attr("class", "y axis")  
     .attr("transform", "translate(" + width + " ,0)") 
     .style("fill", "red")  
     .call(yAxisRight); 

}); 

</script> 
</body>

来源

2015-06-20 weaverd

我能得到你的代码调整一个行后工作：

http://jsfiddle.net/spanndemic/tyLvshfa/

有一个额外的});在脚本的结尾，在上面的小提琴中被注释掉了：

svg.append("g")    
    .attr("class", "y axis")  
    .attr("transform", "translate(" + width + " ,0)") 
    .style("fill", "red")  
    .call(yAxisRight); 

//});

更新：如何在最大数据值画一条线

例......你必须找到具有最大“开放”值数组中的对象，然后根据画的线值。

更新小提琴：http://jsfiddle.net/spanndemic/tyLvshfa/

附加代码：

// get the data object that has the max; 
var openMax = 0; 
var openMaxData; 
data.forEach(function(el, i){ 
    if (parseInt(el.open) > openMax) { 
     openMaxData = el; 
     openMax = el.open; 
    } 
}); 

// append the line 
svg.append("line") 
    .attr("class", "maximum") 
    .attr("x1", x(openMaxData.date)) 
    .attr("x2", x(openMaxData.date)) 
    .attr("y1", 0) 
    .attr("y2", height);

来源

2015-06-20 05:04:43 spanndemic

三江源非常多 - 那完美。关于如何为“开放”数据序列（y1 - 第二个或右侧y轴）实现垂直线来标识该数据序列的最大值的任何进一步想法。这将是一种不同的颜色，并从适当的x值（其中y1 = 0）到曲线的峰值（y1 = 1300，x = 25，在所提供的数据中）垂直上升？ – weaverd

更新了答案/小提琴用线的例子 – spanndemic

其他代码非常好地工作，非常感谢你。我还设法遵循一些其他代码，将轴标题添加到x和y0和y1轴。根据我将在y1轴上获得的各种数据，我将不得不动态调整范围，或者调整y1域的较低值，使其成为负值。在d3中这不应该太困难，或者通过FMP计算引擎插入适当的值。 – weaverd

d3.js中没有外部数据的双Y轴折线图

回答

相关问题