Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The option to delete the axis #26

Closed
jsong0605 opened this issue Jun 21, 2017 · 4 comments
Closed

The option to delete the axis #26

jsong0605 opened this issue Jun 21, 2017 · 4 comments

Comments

@jsong0605
Copy link

jsong0605 commented Jun 21, 2017

Description

I’m trying to render a chart w/o y and x axis.

The chart supposed to be rendered on the very lower side without any space, as I expected.

But the axis still does exist, even after adding the ‘axis.x.show = false’ & ‘axis.y.show = false’.

The axis’s visibility is set hidden, meaning still occupying the space.

So the solution what I am having is like below.

  1. Draw the chart bigger than I meant to
  2. Cut off the x and y axis on purpose

When I render a chart w/o the axis, I repeatedly do this and feel knackered.

I am hoping you to have a plan regarding the bothering works I mentioned above.

Thanks :)

Steps to check or reproduce

var oRes = {
    date: [
        '2016-10-15',
        '2016-11-01',
        '2016-12-01',
        '2017-01-01',
        '2017-02-01',
        '2017-03-01',
        '2017-04-01',
        '2017-05-01',
        '2017-06-01',
        '2017-07-01',
        '2017-08-01',
        '2017-09-01',
        '2017-10-01',
    ],
    data: [null, 42, 47, 37, 44, 40,
        33, 35, 32, 41, 46,
        50, 51]
};
this._aDate = (["date"]).concat(oRes.date);
this._aData = (["precipitation"]).concat(oRes.data);

var chart = Billboard.generate({
    bindto: "#_precipitation",
    interaction: {
        enabled: false
    },
    legend: {
        show: false
    },
    tooltip: {
        show: false
    },
    data: {
        x: "date",
        types:    {
            precipitation : "bar"
        },
        columns: [ this._aDate, this._aData],
        labels: true
    },
    padding: {
        right:  -10
    },
    bar: {
        width: 5,
        zerobased: true
    },
    point: {
        show: false
    },
    axis: {
        x: {
            // fit:  true,
            min:  "2016-10-15",
            max:  "2017-10-14",
            type: "timeseries",
            tick: {
                format: "%-m"
                /*culling: {
                    max: 12 // the number of tick texts will be adjusted to less than this value
                }*/
            },
            show: false,
            padding: {
                left: 0
            }
        },
        y: {
            show: false,
            padding: {
                bottom: 0
            }
        }
    },
    grid:    {
        x: {
            lines: [
                {value: "2016-11-01"},
                {value: "2016-12-01"},
                {value: "2017-01-01"},
                {value: "2017-02-01"},
                {value: "2017-03-01"},
                {value: "2017-04-01"},
                {value: "2017-05-01"},
                {value: "2017-06-01"},
                {value: "2017-07-01"},
                {value: "2017-08-01"},
                {value: "2017-09-01"},
                {value: "2017-10-01"},
                {value: "2017-06-19", class:"c3-dashed-line"}
            ]
        }
    }
});

2issues

@jsong0605 jsong0605 changed the title The Option to hide the axis The option to hide the axis Jun 21, 2017
@jsong0605 jsong0605 changed the title The option to hide the axis The option to delete the axis Jun 21, 2017
@netil
Copy link
Member

netil commented Jun 21, 2017

Good point!
Even though you set not showing, the corresponding node for axis still remains.

If you need to get rid axis nodes, just simply remove nodes

// in case of x axis
d3.selectAll(".bb-axis.bb-axis-x").remove();

// in case of y axis
d3.selectAll(".bb-axis.bb-axis-y").remove();

I'll take considering this issue if can be more nice way to implement. Thanks anyway.

@jsong0605
Copy link
Author

jsong0605 commented Jun 22, 2017

Thanks for your answer.

Obviously, the axis does hide when I remove the axis as like your answer.

The thing is ... The white space still remains.
I couldn't manage to draw a chart without these white space.

I'd like to place the chart right above the bottom line, like below.

issue4

Could you give me a tip for a solution, please ?

@netil
Copy link
Member

netil commented Jun 22, 2017

well, I think this issue isn't really attached on chart functionality.
To make as you want, there're a lot of approaches to make it.

Just one of the way will be defining viewBox attribute to the svg element to crop the viewport.
I'm not give example with your code for the complexity.

bb.generate({
  data: {
    columns: [
      ["data1", 5, 10, 15],
      ["data2", 20, 3, 8]
    ],
    type: "bar"
  },
  axis: {
    x: {
      show: false
    },
    y: {
      show: false
    }
  },
  legend: {
    show: false
  }
});

// to get the chart area size
var rect = d3.select(".bb-zoom-rect");

// set viewBox attribute
d3.select("#chart svg").attr("viewBox", [
    0,0,rect.attr("width"), rect.attr("height")
  ].join(" "))

This example will make chart element to fit on exact svg viewport.

@jsong0605
Copy link
Author

Thank you for giving me a solution. It's been very helpful.

@netil netil closed this as completed Jun 23, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants