NVD3:如何在默认负载下取消设置画笔?

问题描述 投票:0回答:1

我正在使用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”选项以获取什么我想要。

谢谢!

d3.js nvd3.js
1个回答
0
投票

删除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>
© www.soinside.com 2019 - 2024. All rights reserved.