Question

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

.rowChart xAxis issue

我设置了.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检查器显示根空间至少为180，但内部发生了什么事情？

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

感谢您的帮助。

Answer 1

手动设置域为我做了伎俩（根据dc.js forum thread）

.custombox {
    position:absolute;
    top:10px;
    right:50px;
    z-index:999;
    background:yellow;
    height:100px;
    width:100px;
    resize:both;
    overflow:scroll;
}

Answer 2

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

crossfilter数据通常很大，因此滚动会隐藏x轴
视觉上轴没有焦点，难以理解比例

<强>溶液

1.使用crossfilter数据创建dc.js行图

2.使用行图参考

绘制外部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轴？

2 个答案: