我正在使用stackedAreaWithFocusChart,在示例中,他们有这行:
chart.brushExtent([1225425600000, 1285819200000]);
设置默认视图。
这是我要修改的图表类型:https://github.com/novus/nvd3/blob/master/examples/stackedAreaWithFocusChart.html
请注意,默认情况下,它会选择焦点区域的一部分。
我想将其修改为以下行为:https://github.com/novus/nvd3/blob/master/examples/linePlusBarChart.html
请注意,默认情况下,此图表会选择所有内容。
我试图将brushExtent设置为最小值和最大值,但这意味着默认值为所有选定的内容,用户无法轻易拖动其选择内容,因此必须分别移动两端。
我试图注释出brushExtent()行,结果是一个空图,直到我改变焦点,或者我必须单击“ stream”或“ expanded”选项,然后单击“ stacked”选项以获取什么我想要。
谢谢!
删除chart.brushExtent([1225425600000, 1285819200000])
并使用chart.update()
手动更新图表应该可以解决问题。
var colors = d3.scale.category20();
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaWithFocusChart()
.useInteractiveGuideline(true)
.x(function(d) {
return d[0]
})
.y(function(d) {
return d[1]
})
.controlLabels({
stacked: "Stacked"
})
.duration(300);
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.x2Axis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.4f'));
chart.y2Axis.tickFormat(d3.format(',.4f'));
chart.legend.vers('furious');
d3.select('#chart1')
.datum(histcatexplong)
.transition().duration(1000)
.call(chart)
.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {
if (this.__transition__)
this.__transition__.duration = 1;
})
}, 0)
});
nv.utils.windowResize(chart.update);
// Note here manually update chart
chart.update();
return chart;
});
var histcatexplong = [{
"key": "Energy",
"values": [
[1138683600000, 1.544303464167],
[1141102800000, 1.4387289432421],
[1143781200000, 0],
[1146369600000, 0],
[1149048000000, 0],
[1151640000000, 1.328626801128],
[1154318400000, 1.2874050802627],
[1156996800000, 1.0872743105593],
[1159588800000, 0.96042562635813],
[1162270800000, 0.93139372870616],
[1164862800000, 0.94432167305385],
[1167541200000, 1.277750166208],
[1170219600000, 1.2204893886811],
[1172638800000, 1.207489123122],
[1175313600000, 1.2490651414113],
[1177905600000, 1.2593129913052],
[1180584000000, 1.373329808388],
[1183176000000, 0],
[1185854400000, 0],
[1188532800000, 0],
[1191124800000, 0],
[1193803200000, 0],
[1196398800000, 0],
[1199077200000, 0],
[1201755600000, 0],
[1204261200000, 0],
[1206936000000, 0],
[1209528000000, 0],
[1212206400000, 0],
[1214798400000, 0],
[1217476800000, 0],
[1220155200000, 0],
[1222747200000, 1.4516108933695],
[1225425600000, 1.1856025268225],
[1228021200000, 1.3430470355439],
[1230699600000, 2.2752595354509],
[1233378000000, 2.4031560010523],
[1235797200000, 2.0822430731926],
[1238472000000, 1.5640902826938],
[1241064000000, 1.5812873972356],
[1243742400000, 1.9462448548894],
[1246334400000, 2.9464870223957],
[1249012800000, 3.0744699383222],
[1251691200000, 2.9422304628446],
[1254283200000, 2.7503075599999],
[1256961600000, 2.6506701800427],
[1259557200000, 2.8005425319977],
[1262235600000, 2.6816184971185],
[1264914000000, 2.681206271327],
[1267333200000, 2.8195488011259],
[1270008000000, 0],
[1272600000000, 0],
[1275278400000, 0],
[1277870400000, 1.0687057346382],
[1280548800000, 1.2539400544134],
[1283227200000, 1.1862969445955],
[1285819200000, 0],
[1288497600000, 0],
[1291093200000, 0],
[1293771600000, 0],
[1296450000000, 1.941972859484],
[1298869200000, 2.1142247697552],
[1301544000000, 2.3788590206824],
[1304136000000, 2.5337302877545],
[1306814400000, 2.3163370395199],
[1309406400000, 2.0645451843195],
[1312084800000, 2.1004446672411],
[1314763200000, 3.6301875804303],
[1317355200000, 2.454204664652],
[1320033600000, 2.196082370894],
[1322629200000, 2.3358418255202],
[1325307600000, 0],
[1327986000000, 0],
[1330491600000, 0],
[1333166400000, 0.39001201038526],
[1335758400000, 0.30945472725559],
[1338436800000, 0.31062439305591]
]
}, {
"key": "Materials",
"values": [
[1138683600000, 5.5806167415681],
[1141102800000, 5.4539047069985],
[1143781200000, 7.6728842432362],
[1146369600000, 7.719946716654],
[1149048000000, 8.0144619912942],
[1151640000000, 7.942223133434],
[1154318400000, 8.3998279827444],
[1156996800000, 8.532324572605],
[1159588800000, 4.7324285199763],
[1162270800000, 4.7402397487697],
[1164862800000, 4.9042069355168],
[1167541200000, 5.9583963430882],
[1170219600000, 6.3693899239171],
[1172638800000, 6.261153903813],
[1175313600000, 5.3443942184584],
[1177905600000, 5.4932111235361],
[1180584000000, 5.5747393101109],
[1183176000000, 5.3833633060013],
[1185854400000, 5.5125898831832],
[1188532800000, 5.8116112661327],
[1191124800000, 4.3962296939996],
[1193803200000, 4.6967663605521],
[1196398800000, 4.7963004350914],
[1199077200000, 4.1817985183351],
[1201755600000, 4.3797643870182],
[1204261200000, 4.6966642197965],
[1206936000000, 4.3609995132565],
[1209528000000, 4.4736290996496],
[1212206400000, 4.3749762738128],
[1214798400000, 3.3274661194507],
[1217476800000, 3.0316184691337],
[1220155200000, 2.5718140204728],
[1222747200000, 2.7034994044603],
[1225425600000, 2.2033786591364],
[1228021200000, 1.9850621240805],
[1230699600000, 0],
[1233378000000, 0],
[1235797200000, 0],
[1238472000000, 0],
[1241064000000, 0],
[1243742400000, 0],
[1246334400000, 0],
[1249012800000, 0],
[1251691200000, 0],
[1254283200000, 0.44495950017788],
[1256961600000, 0.33945469262483],
[1259557200000, 0.38348269455195],
[1262235600000, 0],
[1264914000000, 0],
[1267333200000, 0],
[1270008000000, 0],
[1272600000000, 0],
[1275278400000, 0],
[1277870400000, 0],
[1280548800000, 0],
[1283227200000, 0],
[1285819200000, 0],
[1288497600000, 0],
[1291093200000, 0],
[1293771600000, 0],
[1296450000000, 0.52216435716176],
[1298869200000, 0.59275786698454],
[1301544000000, 0],
[1304136000000, 0],
[1306814400000, 0],
[1309406400000, 0],
[1312084800000, 0],
[1314763200000, 0],
[1317355200000, 0],
[1320033600000, 0],
[1322629200000, 0],
[1325307600000, 0],
[1327986000000, 0],
[1330491600000, 0],
[1333166400000, 0],
[1335758400000, 0],
[1338436800000, 0]
]
}, {
"key": "Industrials",
"values": [
[1138683600000, 7.1590087090398],
[1141102800000, 7.1297210970108],
[1143781200000, 5.5774588290586],
[1146369600000, 5.4977254491156],
[1149048000000, 5.5138153113634],
[1151640000000, 4.3198084032122],
[1154318400000, 3.9179295839125],
[1156996800000, 3.8110093051479],
[1159588800000, 5.5629020916939],
[1162270800000, 5.7241673711336],
[1164862800000, 5.4715049695004],
[1167541200000, 4.9193763571618],
[1170219600000, 5.136053947247],
[1172638800000, 5.1327258759766],
[1175313600000, 5.1888943925082],
[1177905600000, 5.5191481293345],
[1180584000000, 5.6093625614921],
[1183176000000, 4.2706312987397],
[1185854400000, 4.4453235132117],
[1188532800000, 4.6228003109761],
[1191124800000, 5.0645764756954],
[1193803200000, 5.0723447230959],
[1196398800000, 5.1457765818846],
[1199077200000, 5.4067851597282],
[1201755600000, 5.472241916816],
[1204261200000, 5.3742740389688],
[1206936000000, 6.251751933664],
[1209528000000, 6.1406852153472],
[1212206400000, 5.8164385627465],
[1214798400000, 5.4255846656171],
[1217476800000, 5.3738499417204],
[1220155200000, 5.1815627753979],
[1222747200000, 5.0305983235349],
[1225425600000, 4.6823058607165],
[1228021200000, 4.5941481589093],
[1230699600000, 5.4669598474575],
[1233378000000, 5.1249037357],
[1235797200000, 4.3504421250742],
[1238472000000, 4.6260881026002],
[1241064000000, 5.0140402458946],
[1243742400000, 4.7458462454774],
[1246334400000, 6.0437019654564],
[1249012800000, 6.4595216249754],
[1251691200000, 6.6420468254155],
[1254283200000, 5.8927271960913],
[1256961600000, 5.4712108838003],
[1259557200000, 6.1220254207747],
[1262235600000, 5.5385935169255],
[1264914000000, 5.7383377612639],
[1267333200000, 6.1715976730415],
[1270008000000, 4.0102262681174],
[1272600000000, 3.769389679692],
[1275278400000, 3.5301571031152],
[1277870400000, 2.7660252652526],
[1280548800000, 3.1409983385775],
[1283227200000, 3.0528024863055],
[1285819200000, 4.3126123157971],
[1288497600000, 4.594654041683],
[1291093200000, 4.5424126126793],
[1293771600000, 4.7790043987302],
[1296450000000, 7.4969154058289],
[1298869200000, 7.9424751557821],
[1301544000000, 7.1560736250547],
[1304136000000, 7.9478117337855],
[1306814400000, 7.4109214848895],
[1309406400000, 7.5966457641101],
[1312084800000, 7.165754444071],
[1314763200000, 5.4816702524302],
[1317355200000, 4.9893656089584],
[1320033600000, 4.498385105327],
[1322629200000, 4.6776090358151],
[1325307600000, 8.1350814368063],
[1327986000000, 8.0732769990652],
[1330491600000, 8.5602340387277],
[1333166400000, 5.1293714074325],
[1335758400000, 5.2586794619016],
[1338436800000, 5.1100853569977]
]
}];
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html,
body,
svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>
<svg id="chart1"></svg>