标签: dimple.js

我制作了一些带有凹坑的图表,它们在铬中看起来很好(第43节),但在Firefox(第40版)中它们的渲染不正确.

我在调试器中检查了页面,我可以看到<svg>标签下面有一个<g>标签.检查员显示摹铬标记为720x556,并在Firefox为730x97,这显然会导致一个扭曲的阴谋.

在许多图表上都会出现同样的问题 - 气泡图,折线图和条形图.

我正在使用dimple 2.1.6和d3 3.5.6

这是我的代码示例:

link: function(scope, element, attrs) {
  var svg = dimple.newSvg(element[0], 800, 600);
  svg.text("Charttitle");
  var myChart = new dimple.chart(svg, data);

  myChart.addCategoryAxis("x", "column1");
  myChart.addCategoryAxis("y", "column2");
  myChart.addCategoryAxis("z", "column3");
  myChart.addSeries("column1", dimple.plot.bubble);

  myChart.draw();
}

<div ng-view class="ng-scope">
  <div class="col-md-12 ng-scope" ng-controller="MyController">
    <traffic-plot val="p2pTraffic" load-data="loadData(ip)" class="ng-isolate-scope">
      <svg width="800" height="600">
        <g>
           <!-- The rest of the dimple generated code -->
        </g>
      </svg>
   </traffic-plot>
 </div>
</div>

有任何建议如何解决这个问题？

编辑:在做了一些研究后,我发现它<g>是一个容器元素,用于对图形元素进行分组,允许组元素(在本例中为svg)作为一个元素处理.在元素检查器中,svg似乎具有正确的大小,但顶级 …

我正在修补dimplejs中的多系列图表,并且对多轴逻辑有点困惑.

有以下数据:

var data = [
  {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
  {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
  {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
  {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
  {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]

我试图得到一个图表,按月显示我的收入和利润在同一y轴上,我的单​​位在次y轴上.

使用下面的代码,我可以设法显示3系列.但是Profit系列与收入系列并没有真正在同一个轴上,整个事情看起来更像是一个黑客而不是一个合适的解决方案.

var chart = new dimple.chart(svg, data);

chart.setBounds(60,20,680,330);

var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1]);
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3]);

我想我的逻辑可能是错误的如何正确地玩系列.任何帮助都会很棒.

非常感谢,泽维尔

完整代码:

var svg = dimple.newSvg("body", 800, 400);

var data = [
    {"Month":"01/2013", "Revenue":2000, …

我遇到了这个问题,rCharts情节不会显示在我闪亮的应用程序中.我发现这个例子完全符合我的需要.即使这个图表只是在R中绘图时效果很好,但在闪亮的情况下它是一个空白页面.

我不确定它有什么问题.首先,我不确定我是否选择了正确的库showOuput(),但我找不到更好的解决方案.

我试图绘制它更复杂的应用程序,但是,我在服务器下面复制我的简单应用程序代码:

server.R

library(rCharts)
library(reshape2)
options(RCHART_WIDTH = 1700)
meansconferences <-read.csv("https://raw.github.com/patilv/ESPNBball/master/meansconferences.csv")

shinyServer(function(input, output) {
    output$test <- renderChart({
      meltmeansconferences=melt(meansconferences[-c(1,10:14)], id.vars=c("Conference","Year"))
      d1=dPlot(y="Year", x="value",data=meltmeansconferences, groups="variable",type="bar")
      d1$yAxis(type="addCategoryAxis", orderRule="Year")
      d1$xAxis(type="addPctAxis")
      return(d1)
    })
}
)

而且ui:

ui.R
options(RCHART_LIB = 'dimple')

shinyUI(pageWithSidebar(

headerPanel("rCharts and shiny"),

sidebarPanel(),

mainPanel(
h4("Graph here"),
showOutput("test","dimple")
)
))

编辑:我使用R版3.0.2和rCharts 0.4.2闪亮0.8.0.99

如果您有任何想法,请告诉我.先感谢您!

我创建了一些ggplot2我希望嵌入到Web应用程序中的图表:我想用工具提示来增强图表.我调查了几个选项.我目前正在试验rCharts图书馆,其中包括凹坑图.

这是原始的ggplot:

这是第一次尝试将其转换为凹坑图:

我有几个问题:

1. 在用百分比格式化y轴之后,数据被改变.

2. 格式化x轴以正确渲染日期后,会打印太多标签.

我不喜欢凹陷图表,所以如果有其他选项可以更容易地调整轴格式,我很高兴知道.(莫里斯图表看起来也不错,但调整它们看起来更难,不是吗？)

目标:修复轴并添加提供日期(格式为1984)和值(格式为40%)的工具提示.

如果我能解决1和2,我会非常高兴.但这是另一个不太重要的问题,以防有人提出建议:

将鼠标悬停在线条上时,是否可以将线条标签("前10%")添加到工具提示中？

从以下网址下载数据:https://gist.github.com/ptoche/872a77b5363356ff5399后,将创建一个数据框:

df <- read.csv("ps-income-shares.csv")

基本的凹坑图用以下方法创建:

library("rCharts")
p <- dPlot(
    value ~ Year,
    groups = c("Fractile"),
    data = transform(df, Year = as.character(format(as.Date(Year), "%Y"))),
    type = "line",
    bounds = list(x = 50, y = 50, height = 300, width = 500)
)

虽然基本,到目前为止都很好.但是,以下用于将y数据转换为百分比的命令会更改数据:

p$yAxis(type = "addMeasureAxis", showPercent = TRUE)

我做错了showPercent什么？

供参考,这是ggplot代码:

library("ggplot2")
library("scales")
p <- ggplot(data = df, aes(x …

我正在制作一个Dimple/D3图表,将缺失天数的数据绘制为0.

date                fruit   count
2013-12-08 12:12    apples  2
2013-12-08 12:12    oranges 5
2013-12-09 16:37    apples  1
                             <- oranges inserted on 12/09 as 0
2013-12-10 11:05    apples  6
2013-12-10 11:05    oranges 2
2013-12-10 20:21    oranges 1

我几乎能够得到nrabinowitz的出色工作答案.

我的数据的时间戳格式为YYYY-MM-DD HH-MM,并且散列+ D3.extent时间间隔(以天为单位)导致每天午夜0点,即使在同一天晚些时候存在数据.

一个几乎解决方案,我发现是用.setHours(0,0,0,0)放弃小时/分钟,让所有的数据似乎是从午夜:

...
var dateHash = data.reduce(function(agg, d) { 
 agg[d.date.setHours(0,0,0,0)] = true; 
 return agg; 
}, {});
...

当每天每天只有一个条目时,这可以正常工作,但是当有多个条目将值加在一起时.所以在上面的12/10数据中:苹果:6,橙子:3.

理想情况下(在我看来)我会将绘图数据与datehash以及散列丢弃小时/分钟分开.这会将午夜 - 日期与D3天间隔进行比较,在缺少数据的日子午夜填写0,然后绘制完整小时/分钟的真实点数.

我已尝试data2 = data.slice()过setHours,但图表仍然得到午夜点数:

...
// doesn't work, original data …

我正在试图绘制一个dimple.js svg条形图,它嵌套在jquery-ui标签和accordeon中,我将其用于我的网站布局,我非常绝望.在Chrome和IE中一切正常,但FF不断抛出NS_ERROR_FAILURE异常.这是代码片段:

function drawDimpleChart(){
  d3.json("synkon-dat.php", function (data) {
    var svg = dimple.newSvg("#graph-txttypy-d3", 590, 400);     
    var myChart = new dimple.chart(svg, data); 
    myChart.setBounds(100, 70, 480, 150);
    myChart.addPctAxis("x", "ratio");  
    myChart.addCategoryAxis("y", "kategorie");  
    myChart.addSeries("varianta", dimple.plot.bar);       
    myChart.addLegend(200, 10, 380, 20, "right"); 
    myChart.draw();
  }); 
}

$(document).ready(function() { 
  $("#tabs").tabs();
  $(".accordion").accordion({ active: 'none', clearStyle: true });
  drawDimpleChart();
});

我意识到这个问题与jquery和绘图函数的执行顺序有关.当我在.draw方法之后在回调中调用jquery时,一切正常,但我真的需要在所有数据返回之前显示选项卡(这可能需要一些时间).

请帮忙,我错过了什么？

在dimple.js中有一种方法,例如,将y轴刻度的数量减少一半,这样它只会显示每隔一个y刻度而不是所有它们？

<select  id="cs" name="cs" >
    <option value = "HIV+TB" >HIV+TB</option>
    <option value = "TB">TB</option>
</select>
<button id="btn">Click Me</button>

<div id="chartContainer">
<script type="text/javascript">
    var dropdown = d3.select("#cs")
    var cs2 = dropdown.node().options[dropdown.node().selectedIndex].value;
    d3.csv("test.csv", function (data) {
    var svg = dimple.newSvg("#chartContainer", 590, 600);
    var myChart = new dimple.chart(svg, data1990);
    myChart.setBounds(105, 25, 475, 465)
    myChart.showGridlines = true;
    myChart.addCategoryAxis("x", ["measure","sex","year"]);
    myChart.addCategoryAxis("y", "age_name");
    var z = myChart.addMeasureAxis("z", "rt_mean");
    var s = myChart.addSeries("sex", dimple.plot.bubble);
    s.aggregate = dimple.aggregateMethod.max;
    myChart.addLegend(240, 10, 330, 20, "right");
    myChart.draw();
    d3.select("#btn").on("click", function() {
            myChart.data = …

我有这个jsfiddle:http://jsfiddle.net/Ra2xS/38/.我几乎没有尝试自定义工具提示,因此我可以从工具提示中隐藏一些数据属性但完全失败.

任何人都可以帮我隐藏线系列工具提示中的"日期"吗？

    var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];


function barplot(id,dim,data)
{
    keys = Object.keys(data[0]);
    var xcord = keys[0];
    var ycord = keys[1];
    var svg = dimple.newSvg(id, dim.width, dim.height);
    var parser = d3.time.format("%d-%m-%Y")
    var dateReader = function (d) { return parser.parse(d[xcord]); }
    var start = d3.time.month.offset(d3.min(data, dateReader), -1);
    var end = d3.time.month.offset(d3.max(data, dateReader), 1);

    var myChart = new dimple.chart(svg,data);
    myChart.setBounds(60, 30, 505, 305);        

    //var x = myChart.addCategoryAxis("x", xcord);
    var x = myChart.addTimeAxis("x", …

如何在不删除相关标签的情况下删除刻度线？我想保留标签("香蕉"等),但不是突出显示的刻度.

这是一个类似的小提琴.

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
      { "date" : '2016-01-01', "project" : "Grape", "status" : 1 },
      { "date" : '2016-01-08', "project" : "Grape", "status" : -2 },
      { "date" : '2016-01-07', "project" : "Apple", "status" : 3 },
      { "date" : '2016-01-08', "project" : "Apple", "status" : 1 },
      { "date" : '2016-01-02', "project" : "Banana", "status" : -2 },
      { "date" : '2016-01-15', "project" : "Banana", "status" : 2 },
    ]; …