固定 DC js rowChart 中的 x 轴？

Question

使用 DC js，尝试将 rowChart 设置为固定 X 轴 0-100。然而把它画成一条线？

我设置了 .elasticX(false) 并且看起来像上面那样。设置为true看起来是正确的，但是X轴明显有弹性

从 1.7.0 更改后版本为 2.1.0-dev，结果相同。

以下 JS 看起来像：

day_chart.width(180)
    .height(180)
    .margins({ top: 0, left: 10, right: 10, bottom: 20 })
    .dimension(dayOfWeek)
    .group(dayOfWeekGroup)
    .valueAccessor(function (d) {
        return d.value.Percent;
    })
    // assign colors to each value in the x scale domain
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
    .label(function (d) {
        return d.key.split('.')[1];
    })
    // title sets the row text
    .title(function (d) {
        return TooltipOcc(d.key.split('.')[1], d.value.Percent);
    })
    .elasticX(false)
    .x(d3.scale.linear().domain([0, 100]))
    .xAxis().ticks(4)
;

html 是带有 id 的基本 div。图表是 dc.css 并且 col-md-5 是 bootstrap.css

<div id="day-chart" class="chart col-md-5">
    <div class="title">Day of Week</div>
</div>

Chrome inspector 显示根 space 至少是 180，但内部发生的事情遗漏了什么？

希望这只是我在 JS 中犯的一些放置错误。尝试过将 .x( 放在不同的点，删除 .xAxis.

感谢您的帮助。

Answer 1

手动设置域对我有用（根据 dc.js forum thread）

 day_chart.x(d3.scale.linear().range([0,(day_chart.width()-50)]).domain([0,100]));
 day_chart.xAxis().scale(day_chart.x());

Answer 2

我对 dc.js 行图也有同样的问题。

crossfilter 数据通常很大，所以滚动会隐藏 x 轴
视觉上轴失焦，很难理解比例

解决方案

1.Create dc.js 带交叉过滤器数据的行图

2.Draw 使用行图表参考的外部 x 轴

// Dataset A 
  var datasetA = [{"Subject":"s1","Name":"A","Mark":"50"},{"Subject":"s2","Name":"B","Mark":"40"},{"Subject":"s3","Name":"C","Mark":"40"},{"Subject":"s4","Name":"A","Mark":"50"},{"Subject":"s5","Name":"B","Mark":"40"},{"Subject":"s6","Name":"C","Mark":"40"},{"Subject":"s7","Name":"A","Mark":"50"},{"Subject":"s8","Name":"B","Mark":"40"},{"Subject":"s9","Name":"C","Mark":"40"}];

    // Initialization of crossfilter for the datasetA
    var CFA = crossfilter(datasetA);
    // Creating the dimension
    subject_DA = CFA.dimension(function(d){ return d.Subject; });
    // Creating the chart 
    subjectAChart = dc.rowChart("#subjectA");
    // Creating the group
    subject_AG = subject_DA.group();
    // subject Chart
    subjectAChart
  .width(550).height(300)
  .margins({top: 5, left: 10, right: 10, bottom: 0})
  .dimension(subject_DA)
  .group(subject_AG)
  .gap(2)
  .title(function(d){  return d.key;})
  .label(function (d) { return d.key; })
  .elasticX(true)
  .colors(d3.scale.category20b())
  .xAxis().ticks(4);

    dc.renderAll();

    var margin = {top: 5, right: 0, bottom: 0, left: 0},
    width = 550 - margin.left - margin.right,
    height = 35 - margin.top - margin.bottom;

var svg = d3.select("#ExtAxis")
    .append("svg:svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append('g')
    .attr("transform", function(d, i) {
        return "translate("+margin.left+","+margin.top+")";
    });
var xAxis = subjectAChart.xAxis()
svg.append("g")
    .attr("class", "extnl-axis")
    .attr("transform", "translate(10," + margin.bottom + ")")
    .call(xAxis)
 return xAxis;

Working Example

固定 DC js rowChart 中的 x 轴？

fixed x axis in DC js rowChart?

axis

dc.js

crossfilter