小编Gor*_*don的帖子

我有一个包含URL链接的SVG文件(由Graphviz生成).我希望这些链接可以点击.首先我试过了

<img src="path/to/my.svg"/>

它显示图像正常,但链接不可点击.更改为对象:

 <object data="/path/to/my.svg" type="image/svg+xml">

使链接可单击,但当用户单击它们时,新页面将在对象内打开.有什么方法可以在主窗口中打开链接吗？

这是使用firefox 5.0,但如果有任何跨浏览器的差异你知道我会很感激警告!

我正在尝试为其中一个dc.js示例创建一个jsfiddle.我无法使用URL加载外部文件d3.csv().

有人可以建议如何使用d3.csvjsfiddle 加载csv文件.

我<svg>的宽度是其容器的100%.调整容器大小时,我更新线性xScale.range()以表示新的调整大小的宽度<svg>.显然,我需要重新应用范围到zoom.x()文档中概述的缩放行为:

如果以编程方式修改了比例的域或范围,则应再次调用此函数.设置x标度也会将标度重置为1并将平移重置为[0,0].

重置scale并且translate是我遇到问题的地方.如果我在调整大小之前已经放大了,我打电话zoom.x( xScale ),现在d3认为图表的比例是1而翻译是0,0因此,我无法缩小或平移.

我处理调整大小的方法不正确吗？

是否可以使用直流数据表而不显示组中的数据？我只是想显示所有组中的所有数据!

我的代码如下:

dc.dataTable(".dc-data-table")
  .dimension(dateDimension)
  .group(function (d) {
    return ''
  })
  .size(10) // (optional) max number of records to be shown, :default = 25
  .columns([
      function (d) {
          return getFormattedDate(d.dd);
      },
      function (d) {
          return d.referredfor;
      },
      function (d) {
          return numberFormat(d.cost);
      },
      function (d) {
          return d.gender;
      }
  ])
  .sortBy(function (d) {
      return d.dd;
  })
  .order(d3.ascending)
  .renderlet(function (table) {
      table.selectAll(".dc-table-group").classed("info", true);
  });

这显示了我的数据表但是有一个空行,如下所示:

我过去几周一直在使用dc.js,但有一个问题,我似乎无法搞清楚.

我希望能够使用画笔滤镜更改基于单个图表的四个不同图表的比例.有点像:

priorityTotChart
  .width(2*w/3).height(h/3)
  .margins({top: 10, right: 50, bottom: 20, left: 40})
  .dimension(dateDim)
  .group(priorityTotal)
  .centerBar(true)
  .gap(1)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .elasticY(true)
  .brushOn(true);

var translate = 3;  

priority1Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority1)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["red"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per day")
  .renderArea(true)
  .renderlet(function (chart) {
    chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});

priority2Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority2)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["orange"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per …

我想创建一个类似于以下示例的堆叠线图:

https://dc-js.github.io/dc.js/

但是,另外我想在图表上方显示鼠标悬停的当前值的字段.

也就是说,不必在光标图上暂停一秒钟,然后将鼠标悬停在框上,我希望这些值显示在图表外部,类似于他们在Google财经中所做的那样(请参阅鼠标悬停时,图表左上角的价格和价格会发生变化.例如https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

我真的很感谢社区可以分享的最佳方法.

尝试使用样本数据中3列的最小值,最大值和平均值创建d3/dc/xfilter dataTable.一直在苦苦挣扎但无法理解如何将reduceAdd,reduceRemove,reduceInitial函数集成到dataTable中以创建三个必要的行.

期望的输出将如下所示:

------------------------------------------
|  Value   |  Cars  |  Bikes  |  Trucks  |
------------------------------------------
|    Min   |   125  |   310   |    189   |
------------------------------------------
|    Max   |   230  |   445   |    290   |
------------------------------------------
|    Avg   |   178  |   385   |    245   |
------------------------------------------

也看不出如何添加第一个(标签)列.我知道reduceInitial可以返回一个数组(例如['min', 'max', 'avg'])但是如何引用它的标签？

var myCSV = [	
{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"317","moto":"237"},
{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"445","moto":"273"},
{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"412"},
{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
{"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
{"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
{"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
{"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
{"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
{"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
];


dataTable = dc.dataTable('#dataTable');
lc1 = dc.lineChart("#line1");
lc2 = dc.lineChart("#line2");
lc3 = dc.lineChart("#line3");

var dateFormat …

我有多个行图（crossfilter + dc），我想使用 d3-tip 自定义工具提示。

所以基本上相关的代码是：

rowtip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) { return d.key + ": "  + d.value; });

...my dc charts ...

... then at the bottom of my script tags ...

d3.selectAll('g.row').call(rowtip);
d3.selectAll('g.row').on('mouseover', rowtip.show);

该代码似乎有效，但鼠标悬停事件不会自动触发，并且在页面加载时不会显示工具提示。

但是如果我在控制台上运行最后一行（鼠标悬停），那么一切都会按预期进行。

所以我的问题是如何确保在页面加载时触发鼠标悬停事件。我试过 Jquery $(document).ready(....)，但这没有用。

它必须与加载元素的顺序有关......我猜。但我不是 javascript 专家，更不用说 d3。

提前致谢。

我喜欢 DC.JS 库，并且一直尝试在 DC.js 中创建可点击的聚合表，并取得了部分成功。我想突出显示单击事件上的行（允许多个选择），类似于 dc js 中的行图或序数条形图。与行图一样，当进行多个选择时，应突出显示多个表行。

我无法选择我单击的行，相反，我的 css 会选择第一行，无论我单击哪一行。我尝试使用“this”关键字来选择被单击的当前行，但无济于事。

这是js小提琴：https://jsfiddle.net/yashnigam/kvt9xnbs/83/

这是我进行 CSS 选择的 click 事件的代码：

       marketTable.on("renderlet", function(chart){

        chart.selectAll('tr.dc-table-row').on('click',function(d){

            if(filterKeys.includes(d.key)){

             chart.select('tr.dc-table-row').datum(d.key).style('background-color','gray');
            }

        })

    });

请分享一种在单击时突出显示数据表行的方法，与在行图上的工作方式相同。

我很难让我的交叉过滤器组正确设置。也许有人可以给出提示！

我的数据结构或多或少是这样的：

{datetime: "2014-01-01 20:00:00", id:1}
{datetime: "2014-01-01 22:21:08", id:2}
{datetime: "2014-01-02 12:00:23", id:3} etc...

维度在 datetime 上返回星期几：

var weekdayDimension = ndx.dimension(function(d) {
    return new Date(d.datetime).getDay();
});

现在我在分组方面遇到了问题。我想要每个工作日的平均事件数。到目前为止我有（当然不正确）

var weekdayAvgGroup = weekdayDimension.group(function (d) {
    return d;
});

我想我不明白那个分组到底在做什么......

我的目标是制作一些图表，例如：

Monday => Average 40.3 Events
Tuesday => Average 35.4 Events

我创建了一个JSFiddle请看一下。

有人可以给点提示吗？

更新：

经过额外的思考，我可以在日期上创建一个维度。我所要做的就是知道选择的天数以计算

(total amount of events selected/number of selected days)

所以我需要计算日期维度上的组数。但也没有找到解决方案。

谢谢