首页 \ 问答 \ DC.js范围/焦点图表表现不正常(DC.js range/focus charts not behaving correctly)

DC.js范围/焦点图表表现不正常(DC.js range/focus charts not behaving correctly)

我有两个区域图表,它们下面有一个范围选择。 我希望每个范围选择仅与其相应的图形进行交互。 现在定义如下的图形我会得到那种行为,但是当我通过单击范围图表清除选择时,画笔消失但选择仍然存在。 我有不正确的设置吗? 或者只是定义一个清晰的自定义动作会更好吗?

 var leftFocusChart = dc.lineChart("#volume-focus-left")
    .renderArea(true)
    .width(colmd12Width)
    .height(75)
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 20, left: 40})
    .dimension(week)
    .group(weeks)
    .transitionDuration(0)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.days);

  leftFocusChart.yAxis().ticks(0);

  var leftVolumeChart = dc.lineChart("#volume-chart-left")
    .renderArea(true)
    .width(colmd12Width)
    .height(fiftyPerViewPortHeight)
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 30, left: 40})
    .dimension(date)
    .group(dates)
    .brushOn(false)
    .colors(d3.scale.category20c())
    .transitionDuration(0)
    .rangeChart(leftFocusChart)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.week);

  var rightFocusChart = dc.lineChart("#volume-focus-right")
    .renderArea(true)
    .width(colmd12Width)
    .height(75)
    //.chartGroup('r')
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 20, left: 40})
    .dimension(week)
    .group(weeks)
    .transitionDuration(0)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.days);

  rightFocusChart.yAxis().ticks(0);

  var rightVolumeChart = dc.lineChart("#volume-chart-right")
    .renderArea(true)
    .width(colmd12Width)
    .height(fiftyPerViewPortHeight)
    //.chartGroup('r')
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 30, left: 40})
    .dimension(date)
    .group(dates)
    .brushOn(false)
    .colors(d3.scale.category20c())
    .transitionDuration(0)
    .rangeChart(rightFocusChart)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.week);

  dc.chartRegistry.deregister(leftFocusChart);
  dc.chartRegistry.deregister(leftVolumeChart);
  dc.chartRegistry.deregister(rightFocusChart);
  dc.chartRegistry.deregister(rightVolumeChart);

  dc.chartRegistry.register(leftFocusChart, "l");
  dc.chartRegistry.register(leftVolumeChart, "l")

  dc.chartRegistry.register(rightFocusChart, "r");
  dc.chartRegistry.register(rightVolumeChart, "r");

  console.log("Left:");
  console.log(dc.chartRegistry.list("l"));
  console.log("=====================================");
  console.log("Right:");
  console.log(dc.chartRegistry.list("r"));

I have two area charts that have a range selection below them. I want each range selection to only interact with it's respective graph. Now defining the graphs like the following I get that sort of behavior however when I clear the selection with a single click on the range chart the brush disappears but the selection remains. Is there some setup I'm doing incorrectly? Or would it be better just to define a custom action to happen on brush clear?

 var leftFocusChart = dc.lineChart("#volume-focus-left")
    .renderArea(true)
    .width(colmd12Width)
    .height(75)
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 20, left: 40})
    .dimension(week)
    .group(weeks)
    .transitionDuration(0)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.days);

  leftFocusChart.yAxis().ticks(0);

  var leftVolumeChart = dc.lineChart("#volume-chart-left")
    .renderArea(true)
    .width(colmd12Width)
    .height(fiftyPerViewPortHeight)
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 30, left: 40})
    .dimension(date)
    .group(dates)
    .brushOn(false)
    .colors(d3.scale.category20c())
    .transitionDuration(0)
    .rangeChart(leftFocusChart)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.week);

  var rightFocusChart = dc.lineChart("#volume-focus-right")
    .renderArea(true)
    .width(colmd12Width)
    .height(75)
    //.chartGroup('r')
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 20, left: 40})
    .dimension(week)
    .group(weeks)
    .transitionDuration(0)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.days);

  rightFocusChart.yAxis().ticks(0);

  var rightVolumeChart = dc.lineChart("#volume-chart-right")
    .renderArea(true)
    .width(colmd12Width)
    .height(fiftyPerViewPortHeight)
    //.chartGroup('r')
    .transitionDuration(0)
    .margins({top: 10, right: 20, bottom: 30, left: 40})
    .dimension(date)
    .group(dates)
    .brushOn(false)
    .colors(d3.scale.category20c())
    .transitionDuration(0)
    .rangeChart(rightFocusChart)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
    .xUnits(d3.time.week);

  dc.chartRegistry.deregister(leftFocusChart);
  dc.chartRegistry.deregister(leftVolumeChart);
  dc.chartRegistry.deregister(rightFocusChart);
  dc.chartRegistry.deregister(rightVolumeChart);

  dc.chartRegistry.register(leftFocusChart, "l");
  dc.chartRegistry.register(leftVolumeChart, "l")

  dc.chartRegistry.register(rightFocusChart, "r");
  dc.chartRegistry.register(rightVolumeChart, "r");

  console.log("Left:");
  console.log(dc.chartRegistry.list("l"));
  console.log("=====================================");
  console.log("Right:");
  console.log(dc.chartRegistry.list("r"));

原文:https://stackoverflow.com/questions/35995397
更新时间:2019-12-03 08:18

相关问答

更多

我得到“EntityRef:期待';'(I am getting “ EntityRef: expecting ';' error while creating xml through php ”)

public function printResult($raw_data){ // adding Content Type header("Content-type: text/xml"); // Converts PHP Array to XML with the root element being 'root-element-here' $xml = Excellence_Envision_Helper_Errorflile::createXML('Lo

我如何同时使用Knockout Validation和Knockcout X-editable?(How do I supposed to use Knockout Validation and Knockcout X-editable at the same time?)

验证仅适用于开箱即用的值和selectedOptions,如果您使用自定义绑定,则需要使用ko.validation.makeBindingHandlerValidatable ko.validation.makeBindingHandlerValidatable("selectedOptions"); My configuration was actually like this: self.num1 = ko.observable().extend({ number: true, min:

即使正确放置模块后也会导致ImportError(ImportError even after placing modules correctly)

您尝试导入的模块必须位于要导入它们的.py文件旁边,或者需要将这些模块所在的目录添加到PYTHONPATH 。 请参阅: https : //docs.python.org/2/tutorial/modules.html#the-module-search-path The modules you are trying to import either have to be next to the .py file you are importing them in, or the direct

生产中的Outlook 2013应用程序部署(Outlook 2013 app deployment in production)

不,您无法使用MSI部署Office应用程序。 No, you can't deploy Office Apps using MSI.

在sqoop查询中连接两个表时的算术运算(Arithmetic operation while joining two tables in a sqoop query)

YEAR和MONTH无效Teradata SQL,都是ODBC语法,由ODBC驱动程序自动重写。 尝试EXTRACT(YEAR FROM A.dt) 。 YEAR and MONTH are not valid Teradata SQL, both are ODBC syntax, which is automatically rewritten by the ODBC driver. Try EXTRACT(YEAR FROM A.dt) instead.

重启服务器时会丢失会话变量吗?(Do you lose session variables when you reboot the server? [duplicate])

根据Charlie Arehart 在CF10中的Hidden Gems, Tomcat上的CF10能够在重启时保存会话 。 也许CF10(和Tomcat)中最好的隐藏宝石 能够在重新启动时保存会话。 是! 一些重要的利弊要认真考虑 掌握Tomcat中的配置知识(现在你有) 更多: http : //tomcat.apache.org/tomcat-7.0-doc/config/manager.html 需要修改[cf10] [instance] \ runtime \ conf \ conte

forward_display_line不起作用(forward_display_line doesn't work)

在您的代码中,您调用Gtk.TextBuffer forward_display_line()方法,该方法“消耗”Gtk.TextIter但不会输出与方法执行的更改相同的“Iter”。 对Gtk.TextIter get_offset ()两次调用都应该返回相同的值。 相反,如果您使用Gtk.TextIter forward_line () ,则更改应该并将反映在第二个打印中,例如: Gtk.TextIter line_end; /* Initializing TextIter, placing

Booststrap数据表无法在Web托管上工作(Booststrap datatable not working on web hosting)

它现在正在运作。 我刚试过包含jquery和datatables CDN。 问题是我没有引用jquery,并且数据库库的路径是错误的。 使用下面的脚本添加jquery和datatables <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.

相关文章

更多

最新问答

更多
  • 根据Woocommerce中的自定义字段计算自定义购物车商品价格(Custom cart item price calculation based on dimentions custom fields in Woocommerce)
  • 分开foreach项目并单独打印(Separate foreach items and print them individually)
  • 写模式管道是否同步?(Is write mode pipe synchronous?)
  • 发现可用的Windows Phone强调色和本地化名称(Discover available Windows Phone accent colors and localized names)
  • 使用多线程和WPF更新集合(Update Collection with multithreading and WPF)
  • 如何在字符串的情况下使用同步?(How should the synchronization be used in case of strings?)
  • 打印唯一的行,比较不超过N个字符(Print unique lines, compare no more than N characters)
  • Javascript / jQuery - 如何调用switch case从另一个函数执行(Javascript/jQuery - how to call a switch case to execute from another function)
  • Hbase超时错误不断发生(Hbase timeout errors keep occuring)
  • 如何在Delphi中更改TabControl中活动TAB的颜色(How to change the color of active TAB in a TabControl, in Delphi)
  • 正则表达式:在sublime文本中替换一些PHP代码(Regex: replace some pieces of php code in sublime text)
  • 在带有Scene2D的LibGDX中,如何在按下按钮时连续向右走?(In LibGDX with Scene2D, how can I continuously walk to the right when a button is pressed?)
  • 累加器如何在Haskell中工作?(How do accumulators work in Haskell?)
  • 使用开关检查市场和前缀与正确的货币符号(using switch to check market and prefix with correct currency symbol)
  • 在哪里分配一次使用类?(Where to allocate one time use class?)
  • 如何从两个DateTime / NaiveDateTime获取持续时间?(How do I get Duration from two DateTime / NaiveDateTime?)
  • 解析TimeSpan大于24小时?(Parse a TimeSpan greater than 24 hours? [duplicate])
  • 如何在球拍中本地更改阅读规则?(How to locally change reading rules in racket?)
  • 数据库应该由DI注入时的模拟存储(通过构造函数)(Mock storage when database should be injected by DI (through constructor))
  • 使用maven集成2个eclipse项目(Integrate 2 eclipse projects using maven)
  • 角度ng-repeat不检测变化(Angular ng-repeat not detecting changes)
  • Xaml组件在Silverlight + XNA应用程序的多个页面中可见(Xaml component visible in multiple pages in Silverlight+XNA applications)
  • 如何将`var`变量等同于另一个查询(How to equate `var` variable to another query)
  • 如何设计hyperledger链代码以适合您的业务?(how to design your chaincode of hyperledger to fit for your business?)
  • PHP readfile错误(PHP readfile error)
  • 在Date之后排序列表然后是时间(Sorting list after Date then time)
  • Android内部版本号(Android build number)
  • 在没有预设退出条件的情况下停止无限循环(stopping an infinite loop with no preset exit condition)
  • Phonegap应用程序全屏通过html页面中的按钮(Phonegap Application fullscreen through a button in html page)
  • PAA是否适合在门户网站中自动执行wcm库部署和设置?(Is PAA a good candidate for automating wcm library deployment and setup in portal?)